Skip to main content

SILK UI Framework

 

OutSystems

Columns Pattern

The Columns pattern allows 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 the Development Environment 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?