Skip to main content

 

Design UI

 

Applies only to Mobile Apps and Reactive Web Apps

 

OutSystems

Tabs Pattern

  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Set of Tabs with placeholders for Title and Content, used to display large sets of information which can be split into different areas, while 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 placeholders 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?