Layout
Arrange content on the page. Layout gives you the containers you reach for constantly: a row, a column,
a grid and a flexible region, each taking a content closure, just like Dom.Tag. They render
the framework's layout primitives, so spacing and flow stay consistent wherever you use them.
Contents
Functions
Functions
Layout.Column
Stacks its content in a vertical column.
Parameters
| Name | Type | Description |
|---|---|---|
content | function | A closure describing the column's children. |
Example
Layout.Column(() => {
Content.Title("Menu");
Content.Text("Home");
Content.Text("About");
});Layout.Grid
Arranges its content in a responsive grid.
Parameters
| Name | Type | Description |
|---|---|---|
content | function | A closure describing the grid's cells. |
Example
Layout.Grid(() => {
Content.Panel(() => Content.Text("One"));
Content.Panel(() => Content.Text("Two"));
});Layout.Row
Lays its content out in a horizontal row.
Parameters
| Name | Type | Description |
|---|---|---|
content | function | A closure describing the row's children. |
Example
Layout.Row(() => {
Content.Text("Left");
Content.Text("Right");
});Layout.Stretch
A flexible region that takes a share of the space around it.
Parameters
| Name | Type | Description |
|---|---|---|
amount | number | The relative share to take: 1 shares equally with other stretches, 2 takes twice as much, and so on. |
content | function | A closure describing the region's contents. |
Example
Layout.Row(() => {
Content.Text("Menu");
Layout.Stretch(1, () => {
Content.Text("Body");
});
});