columns
Overview
columns
allow developers to control the layout of a view and its components, which is particularly useful for medium and large screens.
Multiple columns
Columns now support multiple nested columns which enables use cases like the following:

Basic Example
<columns>
<column>
<heading>Column 1</heading>
</column>
<column>
<heading>Column 2</heading>
</column>
<column>
<heading>Column 3</heading>
</column>
</columns>

Standard Attributes
None
Advanced Attributes
column-gap
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
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
show-ifhide-ifshow-if
and hide-if
Last updated