columns
Last updated
Last updated
columns
allow developers to control the layout of a view and its components, which is particularly useful for medium and large screens.
Columns now support multiple nested columns which enables use cases like the following:
<columns>
<column>
<heading>Column 1</heading>
</column>
<column>
<heading>Column 2</heading>
</column>
<column>
<heading>Column 3</heading>
</column>
</columns>
None
column-gap
Optional
Type: number
(a values in px)
Default: 48 px
Specify the width of the gap between columns.
<info>default column-gap</info>
<columns>
<column>
<heading>Column 1</heading>
</column>
<column>
<heading>Column 2</heading>
</column>
<column>
<heading>Column 3</heading>
</column>
</columns>
<info>column-gap="80"</info>
<columns column-gap="80">
<column>
<heading>Column 1</heading>
</column>
<column>
<heading>Column 2</heading>
</column>
<column>
<heading>Column 3</heading>
</column>
</columns>
column-order
Optional
Type: left-to-right
| right-to-left
Default: left-to-right
Specify the order of the columns.
<info>column-order="left-to-right"</info>
<columns column-order="left-to-right">
<column>
<heading>Column 1</heading>
</column>
<column>
<heading>Column 2</heading>
</column>
<column>
<heading>Column 3</heading>
</column>
</columns>
<info>column-order="right-to-left"</info>
<columns column-order="right-to-left">
<column>
<heading>Column 1</heading>
</column>
<column>
<heading>Column 2</heading>
</column>
<column>
<heading>Column 3</heading>
</column>
</columns>
show-if
and hide-if