Skip to main content

SILK UI Framework

 

OutSystems

Gallery Pattern

The Gallery pattern displays content (such as cards) in a specific set of columns, configurable per device type and orientation. 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 a preview in Service Studio:

How to Use the Gallery Pattern

1. Drag a list or static content.

2. Set the number of items in Input Parameters.

Using Animations Inside the Gallery

1. Use the Animate block as the first element inside the list.

2. Place your content inside the b block.

3. Define the Animate block with your desired type of animation, and set the delay with current row number from the list.

 

Note: If you are using a List inside a Gallery, you need to disable virtualization.

 

Input Parameters

Input Name Description Default Value
ColumnsInPhonePortrait Number of columns in a Portrait phone. 1
ColumnsInPhoneLandscape Number of columns in a Landscape phone. 2
ColumnsInTabletPortrait Number of columns in a portrait tablet. 3
ColumnsInTabletLandscape Number of columns in a Landscape tablet. 4
UseGutter If set, add a gutter to all the columns except the first. True

 

Layout and Classes

 

Samples

The following sample uses the Gallery pattern:

  • Was this article helpful?