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

show-if

hide-if