Layout directive
The layout directive handles the rendering of the grid system using the CSS grid specification, this is the definition of columns and rows on every part of the form. This directive is being used in pages and sections, both can have a header, body and footer, and they all rely on the definition given in the configuration.
The layout directive uses CSS grid areas to define the number of columns and rows that should be displayed in any given page or section. There are four parameters used by the directive:
-
gridTemplateColumns (
string): the grid-template-columns parameter as specified in the CSS grid specification. e.g. "100px 100px" defines the widths of a CSS grid with two columns. -
gridTemplateRows (
string): the grid-template-rows parameter as specified in the CSS grid specification. e.g. "50px 50px" defines the height of a CSS grid with two rows. -
gridTemplateAreas (
string): the grid-template-areas parameter as specified in the CSS grid specification. e.g. "topleft topright" "bottomleft bottomright" defines a grid with 4 areas. -
style (
any- JSON object): ngStyle object to be passed to the container that uses the directive.
See an example of a CSS grid with 4 cells definition in this Codepen
In the following example, the body of a page in FornQL is configured to show 4 cells
- In the page editor, the template parameters are defined as explained in this article
- FormQL shows the page with 4 cells
- Pages in FormQL hold sections so they can be dragged and dropped into the page
In the following example, the body and header of a section in FornQL is configured to show 1 cell in the header and 4 cells in the body
- In the section editor, the template parameters are defined as explained in this article
- FormQL shows the section with 1 cell in the header and 4 cells in the body
- Sections in FormQL hold components so they can be dragged and dropped into the section
