• Introduction
    • Why Liquid
    • Getting started
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Framework integrations
      • React bindings
      • Vue bindings
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outsid
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Usage
    1. Disabled
    2. Ghost
    3. Brand color
    4. Rounded corners
    5. Floating
    6. Floating on brand color
    7. Size
    8. With icons
    9. With many tabs
    10. Full width
  2. Events
  3. Select a tab programmatically
  4. Properties
  5. Events
  6. Methods
    1. switchTab(identifier: number | string) => Promise<void>
Components Tabs

ld-tabs #

The ld-tabs component hides content behind selectable items and thereby helps to place content in a space-saving manner.

Usage #

Use ld-tabs as a container for a list of tabs - the ld-tablist which in turn contains a number of ld-tab items - and a container ld-tabpanellist which contains the same number of corresponding ld-tabpanel items.

<ld-tabs>
  <ld-tablist>
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab>Vegetables</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
  <ld-tabpanellist>
    <ld-tabpanel>
      <ld-typo style="margin-top: 1rem">
        <a href="#apple">Apple</a>, orange, banana
      </ld-typo>
    </ld-tabpanel>
    <ld-tabpanel>
      <ld-typo style="margin-top: 1rem">
        Potato, <a href="#cucumber">cucumber</a>, tomato
      </ld-typo>
    </ld-tabpanel>
    <ld-tabpanel>
      <ld-typo style="margin-top: 1rem">
        Walnut, chestnut, <a href="#strawberry">strawberry</a>
      </ld-typo>
    </ld-tabpanel>
  </ld-tabpanellist>
</ld-tabs>
Fruits Vegetables Nuts Apple, orange, banana Potato, cucumber, tomato Walnut, chestnut, strawberry

Disabled #

<ld-tabs>
  <ld-tablist>
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab disabled>Vegetables</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
</ld-tabs>
Fruits Vegetables Nuts

Ghost #

<ld-tabs>
  <ld-tablist mode="ghost">
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab>Vegetables</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
</ld-tabs>
Fruits Vegetables Nuts

Brand color #

<ld-tabs>
  <ld-tablist mode="brand-color">
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab>Vegetables</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
</ld-tabs>
Fruits Vegetables Nuts

Rounded corners #

<ld-tabs>
  <ld-tablist mode="brand-color" rounded="all">
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab>Vegetables</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
</ld-tabs>

<ld-tabs>
  <ld-tablist mode="brand-color" rounded="all-lg">
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab>Vegetables</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
</ld-tabs>

<ld-tabs>
  <ld-tablist mode="brand-color" rounded="top">
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab>Vegetables</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
</ld-tabs>

<ld-tabs>
  <ld-tablist mode="brand-color" rounded="top-lg">
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab>Vegetables</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
</ld-tabs>
Fruits Vegetables Nuts Fruits Vegetables Nuts Fruits Vegetables Nuts Fruits Vegetables Nuts

Floating #

<ld-tabs>
  <ld-tablist mode="floating">
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab>Vegetables</ld-tab>
    <ld-tab disabled>Scrap Metal</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
</ld-tabs>
Fruits Vegetables Scrap Metal Nuts

Floating on brand color #

<ld-tabs>
  <ld-tablist mode="floating-on-brand-color">
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab>Vegetables</ld-tab>
    <ld-tab disabled>Scrap Metal</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
</ld-tabs>
Fruits Vegetables Scrap Metal Nuts

Size #

<ld-tabs>
  <ld-tablist size="sm">
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab>Vegetables</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
</ld-tabs>

<ld-tabs>
  <ld-tablist>
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab>Vegetables</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
</ld-tabs>

<ld-tabs>
  <ld-tablist size="lg">
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab>Vegetables</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
</ld-tabs>
Fruits Vegetables Nuts Fruits Vegetables Nuts Fruits Vegetables Nuts

With icons #

<ld-tabs>
  <ld-tablist>
    <ld-tab selected><ld-icon name="placeholder" aria-label="Fruits"></ld-icon></ld-tab>
    <ld-tab><ld-icon name="placeholder" aria-label="Vegetables"></ld-icon></ld-tab>
    <ld-tab><ld-icon name="placeholder" aria-label="Nuts"></ld-icon></ld-tab>
  </ld-tablist>
</ld-tabs>

<ld-tabs>
  <ld-tablist mode="ghost">
    <ld-tab selected><ld-icon name="placeholder"></ld-icon>Fruits</ld-tab>
    <ld-tab><ld-icon name="placeholder"></ld-icon>Vegetables</ld-tab>
    <ld-tab><ld-icon name="placeholder"></ld-icon>Nuts</ld-tab>
  </ld-tablist>
</ld-tabs>
Fruits Vegetables Nuts

With many tabs #

You should try to avoid using tab bars with more than five tab items. But if you really must, the ld-tabs component has got you covered:

<ld-tabs>
  <ld-tablist>
    <ld-tab selected>Classical</ld-tab>
    <ld-tab>Rock</ld-tab>
    <ld-tab>Indie</ld-tab>
    <ld-tab>Jazz</ld-tab>
    <ld-tab>Blues</ld-tab>
    <ld-tab>Soul</ld-tab>
    <ld-tab>Gospel</ld-tab>
    <ld-tab>Pop</ld-tab>
    <ld-tab>Hip Hop</ld-tab>
    <ld-tab>Raggea</ld-tab>
    <ld-tab>Raggeaton</ld-tab>
    <ld-tab>R&B</ld-tab>
    <ld-tab>Electric</ld-tab>
    <ld-tab>Country</ld-tab>
    <ld-tab>Punk</ld-tab>
    <ld-tab>Latin</ld-tab>
    <ld-tab>Funk</ld-tab>
    <ld-tab>Ambient</ld-tab>
    <ld-tab>Bossa Nova</ld-tab>
    <ld-tab>Flamenco</ld-tab>
  </ld-tablist>
</ld-tabs>
Classical Rock Indie Jazz Blues Soul Gospel Pop Hip Hop Raggea Raggeaton R&B Electric Country Punk Latin Funk Ambient Bossa Nova Flamenco

Full width #

<ld-tabs style="width: 100%">
  <ld-tablist mode="ghost">
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab disabled>Vegetables</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
</ld-tabs>

<ld-tabs style="width: 100%">
  <ld-tablist>
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab disabled>Vegetables</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
</ld-tabs>

<ld-tabs style="width: 100%">
  <ld-tablist mode="brand-color">
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab disabled>Vegetables</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
</ld-tabs>
Fruits Vegetables Nuts Fruits Vegetables Nuts Fruits Vegetables Nuts

Events #

The ld-tabs component emits the ldtabchange event which you can use to bind custom event handlers. The event is only emmitted on clicks on non-disabled and non-selected tabs.

<ld-tabs id="tabs_events">
  <ld-tablist mode="ghost">
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab>Vegetables</ld-tab>
    <ld-tab>Nuts</ld-tab>
    <ld-tab disabled>Grain</ld-tab>
  </ld-tablist>
</ld-tabs>

<script>
  document.getElementById('tabs_events').addEventListener('ldtabchange', ev => {
    window.alert(`Current tab index is: ${ev.detail}`)
  })
</script>
Fruits Vegetables Nuts Grain

Select a tab programmatically #

There are two ways to programmatically select a tab:

  1. By using the switchTab-method exposed by the ld-tabs element:
<ld-tabs id="tabs_programmatic_1">
  <ld-tablist mode="ghost">
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab>Vegetables</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
  <ld-tabpanellist>
    <ld-tabpanel>
      <ld-typo style="margin-top: 1rem">
        Apple, orange, banana
      </ld-typo>
    </ld-tabpanel>
    <ld-tabpanel>
      <ld-typo style="margin-top: 1rem">
        Potato, cucumber, tomato
      </ld-typo>
    </ld-tabpanel>
    <ld-tabpanel>
      <ld-typo style="margin-top: 1rem">
        Walnut, chestnut, strawberry
      </ld-typo>
    </ld-tabpanel>
  </ld-tabpanellist>
</ld-tabs>

<ld-button id="nuts_button_1">Select nuts</ld-button>

<script>
  document.getElementById('nuts_button_1').addEventListener('click', async (ev) => {
    await document.getElementById('tabs_programmatic_1').switchTab(2)

    console.log(`Tab successfully set to tab at index 2 using ld-tabs' "switchTab"-method.`)
  })
</script>
Fruits Vegetables Nuts Apple, orange, banana Potato, cucumber, tomato Walnut, chestnut, strawberry Select nuts
  1. By using the select-method exposed by the ld-tab element:
<ld-tabs id="tabs_programmatic_2">
  <ld-tablist mode="ghost">
    <ld-tab selected>Fruits</ld-tab>
    <ld-tab>Vegetables</ld-tab>
    <ld-tab>Nuts</ld-tab>
  </ld-tablist>
  <ld-tabpanellist>
    <ld-tabpanel>
      <ld-typo style="margin-top: 1rem">
        Apple, orange, banana
      </ld-typo>
    </ld-tabpanel>
    <ld-tabpanel>
      <ld-typo style="margin-top: 1rem">
        Potato, cucumber, tomato
      </ld-typo>
    </ld-tabpanel>
    <ld-tabpanel>
      <ld-typo style="margin-top: 1rem">
        Walnut, chestnut, strawberry
      </ld-typo>
    </ld-tabpanel>
  </ld-tabpanellist>
</ld-tabs>

<ld-button id="nuts_button_2">Select nuts</ld-button>

<script>
  document.getElementById('nuts_button_2').addEventListener('click', async (ev) => {
    await document.getElementById('tabs_programmatic_2').querySelectorAll('ld-tab')[2].select()

    console.log(`Tab successfully set to tab at index 2 using ld-tab's "select"-method.`)
  })
</script>
Fruits Vegetables Nuts Apple, orange, banana Potato, cucumber, tomato Walnut, chestnut, strawberry Select nuts

Properties #

Property Attribute Description Type Default
key key for tracking the node's identity when working with lists string | number undefined
ref ref reference to component any undefined

Events #

Event Description Type
ldtabchange Emitted with the id of the selected tab. CustomEvent<string>

Methods #

switchTab(identifier: number | string) => Promise<void> #

Set selected tab to a certain index

Returns #

Type: Promise<void>

Built with StencilJS