Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

Tabs Reference

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • Layout and classes

    CSS selectors

    Element CSS Class Description
    Active Header .tabs-header-item.active It's active header (represented as the one with a colored underline)
    Active Tab .tabs-content-item.active It's active content

    Advanced

    Here are some more advanced use-cases of the widget.

    Change the active header style

    Write the following CSS in the CSS editor and change the yourcolor value:

    .tabs-header-item.active {
        border-bottom: var( --border-size-m) solid yourcolor;
    }
    

    Or using CSS variables: var(--color-yourcolor)

    Example:

    .tabs-header-item.active {
        background: border-bottom: var( --border-size-m) solid var(--color-red)
    }
    

    Add a background color to the tabs

    1. Enclose the tabs with a container.
    2. Add the classes background-blue-lighter text-neutral-0, this adds a light blue background and force the text to be white.
    3. Publish the application.

    • Was this article helpful?