Links

columns

Overview

columns allow developers to control the layout of a view and its components, which is particularly useful for medium and large screens.
On screens narrower than the 768px breakpoint value (i.e. smartphones as opposed to tablets), columns will be stacked — the components inside of them are rendered below each other as if they were not defined in columns.

Multiple columns

Columns now support multiple nested columns which enables use cases like the following:

Basic Example

main.view.xml
<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

Version compatibility
column-gap was introduced in version 4.86.1 of the JourneyApps Runtime.
Optional
Type: number (a values in px)
Default: 48 px
Specify the width of the gap between columns.
main.view.xml
<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

Version compatibility
column-order was introduced in version 4.86.1 of the JourneyApps Runtime.
Optional
Type: left-to-right| right-to-left
Default: left-to-right
Specify the order of the columns.
main.view.xml
<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

Last modified 1mo ago