Layout
<caos-layout>
puts the pieces inside a section side by side, in columns that respond to the width they have
May be placed on a record page, an app’s home page and a page inside an app.
Inputs
Section titled “Inputs”| Name | Attribute | Description | Type | Default | Required |
|---|---|---|---|---|---|
horizontalAlign |
horizontal-align, markup only |
How the items share what is left of the row: packed at the start, centred, packed at the end, with equal space around each one, or spread so the first and last reach the edges. | text — one of start, center, end, space, spread | start | Optional |
verticalAlign |
vertical-align, markup only |
Where items of different heights sit across the row — top, middle or bottom — or stretched to the tallest one on their line. | text — one of start, center, end, stretch | start | Optional |
Events
Section titled “Events”Not documented yet — this piece has not said.
| Name | What goes in it |
|---|---|
| the default slot | LayoutItems, one per column. A LayoutItem can hold another Layout, which is how a column is split into two stacked halves. |
Styling hooks
Section titled “Styling hooks”Not documented yet — this piece has not said.
Methods
Section titled “Methods”Not documented yet — this piece has not said.
Readable state
Section titled “Readable state”Not documented yet — this piece has not said.
Styling parts
Section titled “Styling parts”| Part | Which piece of it | When it is there |
|---|---|---|
::part(layout) |
The wrapping row the items are laid out along. | Always |
When to use it
Section titled “When to use it”When a section holds more than one thing and they belong next to each other on a wide screen — a form beside its summary, a chart beside the figures it draws, two halves of a record.
What to use instead
Section titled “What to use instead”- CardGrid — The things side by side are records from one list, all the same shape, and the count is not fixed.
- ActionBar — What sits in a row is a set of actions — buttons with one primary among them.
- DetailSection — What needs arranging is a record’s fields, which a detail section already sets out in columns.
Accessibility
Section titled “Accessibility”A layout adds no role and no landmark: it is arrangement, not structure, and a screen reader hears the pieces it holds rather than the grid. Reading order and tab order follow the order the items are placed in, never where they are drawn. A size changes only width, never order, so what a person hears on a wide screen is the same sequence somebody sees stacked on a phone. Place items in the order they should be read.
Examples
Section titled “Examples”Two columns
Section titled “Two columns”The plainest layout: two items, each half the row, standing side by side.
{ "id": "example", "section": "Two columns", "columns": 1, "items": [ { "id": "layout_1", "type": "component", "key": "layout", "children": [ { "id": "layout_item_2", "type": "component", "key": "layout_item", "inputs": { "size": 6 }, "children": [ { "id": "tag_3", "type": "component", "key": "tag", "children": [ "First column" ] } ] }, { "id": "layout_item_4", "type": "component", "key": "layout_item", "inputs": { "size": 6 }, "children": [ { "id": "tag_5", "type": "component", "key": "tag", "children": [ "Second column" ] } ] } ] } ]}<caos-layout> <caos-layout-item size="6"> <caos-tag>First column</caos-tag> </caos-layout-item> <caos-layout-item size="6"> <caos-tag>Second column</caos-tag> </caos-layout-item></caos-layout>A column split in two
Section titled “A column split in two”An item holding a layout of its own — one wide column beside a narrow one that stacks two halves.
{ "id": "example", "section": "A column split in two", "columns": 1, "items": [ { "id": "layout_1", "type": "component", "key": "layout", "children": [ { "id": "layout_item_2", "type": "component", "key": "layout_item", "inputs": { "size": 8 }, "children": [ { "id": "tag_3", "type": "component", "key": "tag", "children": [ "Main column" ] } ] }, { "id": "layout_item_4", "type": "component", "key": "layout_item", "inputs": { "size": 4 }, "children": [ { "id": "layout_5", "type": "component", "key": "layout", "children": [ { "id": "layout_item_6", "type": "component", "key": "layout_item", "inputs": { "size": 12 }, "children": [ { "id": "tag_7", "type": "component", "key": "tag", "children": [ "Upper half" ] } ] }, { "id": "layout_item_8", "type": "component", "key": "layout_item", "inputs": { "size": 12 }, "children": [ { "id": "tag_9", "type": "component", "key": "tag", "children": [ "Lower half" ] } ] } ] } ] } ] } ]}<caos-layout> <caos-layout-item size="8"> <caos-tag>Main column</caos-tag> </caos-layout-item> <caos-layout-item size="4"> <caos-layout> <caos-layout-item size="12"> <caos-tag>Upper half</caos-tag> </caos-layout-item> <caos-layout-item size="12"> <caos-tag>Lower half</caos-tag> </caos-layout-item> </caos-layout> </caos-layout-item></caos-layout>Spaced around
Section titled “Spaced around”Items narrower than the row with equal room left before, between and after each of them.
{ "id": "example", "section": "Spaced around", "columns": 1, "items": [ { "id": "layout_1", "type": "component", "key": "layout", "inputs": { "horizontal_align": "space" }, "children": [ { "id": "layout_item_2", "type": "component", "key": "layout_item", "inputs": { "size": 3 }, "children": [ { "id": "tag_3", "type": "component", "key": "tag", "children": [ "One" ] } ] }, { "id": "layout_item_4", "type": "component", "key": "layout_item", "inputs": { "size": 3 }, "children": [ { "id": "tag_5", "type": "component", "key": "tag", "children": [ "Two" ] } ] }, { "id": "layout_item_6", "type": "component", "key": "layout_item", "inputs": { "size": 3 }, "children": [ { "id": "tag_7", "type": "component", "key": "tag", "children": [ "Three" ] } ] } ] } ]}<caos-layout horizontal-align="space"> <caos-layout-item size="3"> <caos-tag>One</caos-tag> </caos-layout-item> <caos-layout-item size="3"> <caos-tag>Two</caos-tag> </caos-layout-item> <caos-layout-item size="3"> <caos-tag>Three</caos-tag> </caos-layout-item></caos-layout>Spread to the edges
Section titled “Spread to the edges”The same three items pushed apart until the first and last reach the ends of the row.
{ "id": "example", "section": "Spread to the edges", "columns": 1, "items": [ { "id": "layout_1", "type": "component", "key": "layout", "inputs": { "horizontal_align": "spread" }, "children": [ { "id": "layout_item_2", "type": "component", "key": "layout_item", "inputs": { "size": 3 }, "children": [ { "id": "tag_3", "type": "component", "key": "tag", "children": [ "One" ] } ] }, { "id": "layout_item_4", "type": "component", "key": "layout_item", "inputs": { "size": 3 }, "children": [ { "id": "tag_5", "type": "component", "key": "tag", "children": [ "Two" ] } ] }, { "id": "layout_item_6", "type": "component", "key": "layout_item", "inputs": { "size": 3 }, "children": [ { "id": "tag_7", "type": "component", "key": "tag", "children": [ "Three" ] } ] } ] } ]}<caos-layout horizontal-align="spread"> <caos-layout-item size="3"> <caos-tag>One</caos-tag> </caos-layout-item> <caos-layout-item size="3"> <caos-tag>Two</caos-tag> </caos-layout-item> <caos-layout-item size="3"> <caos-tag>Three</caos-tag> </caos-layout-item></caos-layout>Centred across the row
Section titled “Centred across the row”Items of different heights lined up through their middles instead of along their tops.
{ "id": "example", "section": "Centred across the row", "columns": 1, "items": [ { "id": "layout_1", "type": "component", "key": "layout", "inputs": { "vertical_align": "center" }, "children": [ { "id": "layout_item_2", "type": "component", "key": "layout_item", "inputs": { "size": 6, "padding": "around-large" }, "children": [ { "id": "tag_3", "type": "component", "key": "tag", "children": [ "Taller item" ] } ] }, { "id": "layout_item_4", "type": "component", "key": "layout_item", "inputs": { "size": 6 }, "children": [ { "id": "tag_5", "type": "component", "key": "tag", "children": [ "Shorter item" ] } ] } ] } ]}<caos-layout vertical-align="center"> <caos-layout-item size="6" padding="around-large"> <caos-tag>Taller item</caos-tag> </caos-layout-item> <caos-layout-item size="6"> <caos-tag>Shorter item</caos-tag> </caos-layout-item></caos-layout>Stretched to the tallest
Section titled “Stretched to the tallest”Every item on the line made as tall as the tallest one, so columns with edges line up.
{ "id": "example", "section": "Stretched to the tallest", "columns": 1, "items": [ { "id": "layout_1", "type": "component", "key": "layout", "inputs": { "vertical_align": "stretch" }, "children": [ { "id": "layout_item_2", "type": "component", "key": "layout_item", "inputs": { "size": 6, "padding": "around-large" }, "children": [ { "id": "tag_3", "type": "component", "key": "tag", "children": [ "Taller item" ] } ] }, { "id": "layout_item_4", "type": "component", "key": "layout_item", "inputs": { "size": 6 }, "children": [ { "id": "tag_5", "type": "component", "key": "tag", "children": [ "Stretched item" ] } ] } ] } ]}<caos-layout vertical-align="stretch"> <caos-layout-item size="6" padding="around-large"> <caos-tag>Taller item</caos-tag> </caos-layout-item> <caos-layout-item size="6"> <caos-tag>Stretched item</caos-tag> </caos-layout-item></caos-layout>