Skip to main content

SILK UI Framework

 

OutSystems

Tabs Pattern

Set of Tabs with placeholders for Title and Content, used to display large sets of information which can be split into different areas, whilst always remaining a click away. Use this pattern to display large sets of information split into different areas.

Here's the preview in Service Studio:

How to Use the Tabs Pattern

1. Drag the Tabs pattern into your screen.

2. Place your content inside the Placeholders.

a. The placeholder Tabs1, Tabs2, Tabs3, Tabs4 and Tabs5 represent the header tabs.

b. The other placeholders represent the content of each tab.
c. If you only need 2 or 3 tabs and you want to hide the others, you don’t need to do anything. This pattern hides the placeholders without content.

3. Set the StartingTab parameter to display the Tabs when rendering (see Input Parameters).

4. Publish your app.

Add Styles to Tabs and Content

This is an example of CSS code to change the style of selected items in Tabs:

.tabs-header-tab {
    background-color: #ebebeb;
}
.tabs-header-tab.active {
    border-bottom: 3px solid #000;
    background-color: #ebebeb;
    color: #0097eb;
}
.tabs-content-tab {
    background-color: #ccc;
    padding: 20px;
    font-size: 18px;
    font-stretch: condensed;
}

Hide Tabs without Content

All Silk patterns hide divs without content in the placeholder. If you only need 2 or 3 tabs and you want to hide the others, you don’t need to do anything. 

Input Parameters

Input Name Description Default Value
StartingTab Index of the currently active tab. 0

Events

Event Name Description Mandatory
OnTabChange Triggered when switching tabs. False

Layout and Classes

CSS Selectors

Element CSS Class Description
Tabs Wrapper .tabs Container that wraps all Tabs elements.
Active tab header .tabs-header-tab-active Represents the header of the active element.
Open tab content .tabs-content-tab-open The dot that represents the content of the open item.

Device and Patterns Compatibility

Incompatibility with RTL on Android devices with 4.4.2 OS version.

Avoid using Tabs inside patterns with swipe events, like Stacked Cards or Carousel.

Samples

The following samples use the Tabs pattern:

  • Was this article helpful?