Skip to main content

 

Design UI

 

Applies only to Mobile Apps and Reactive Web Apps

 

OutSystems

Columns Pattern

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • The Columns pattern enables you to split content into multiple columns. You can configure the behavior using the input parameters. They will define how columns will stack in different devices. This is ideal to improve the way information is displayed across different devices. You can use this pattern to display a list of elements side by side, with a different number of items per row on different devices.

    Here's the preview , in Service Studio, of the different ways columns can be split into:

    How to Use the Columns Pattern

    Configure the behavior using the input parameters to define how columns will stack in different devices.

    For an uneven number of columns, the following splits apply:

    Entities.ColumnBreak.BreakNone (default)

    Entities.ColumnBreak.BreakMiddle

    Entities.ColumnBreak.BreakLast

    Entities.ColumnBreak.BreakFirst

    Input Parameters

    Input Name Description Default Value
    UseGutter Creates a space between columns. True
    PhonePortraitBreak Behavior of the columns in a Phone with Portrait orientation. BreakNone
    PhoneLandscapeBreak Behavior of the columns in a Phone with Landscape orientation. BreakNone
    TabletPortraitBreak Behavior of the columns in a Tablet with Portrait orientation. BreakNone
    TabletLandscapeBreak Behavior of the columns in a Tablet with Landscape orientation. BreakNone

    Layout and Classes

    Samples

    See how the Account Dashboard sample uses the Columns pattern:

    • Was this article helpful?