• Introduction
    • Why Liquid
    • Getting started
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • React bindings
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • 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
    • Checkbox
    • Circular Progress
    • 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
    • Switch
      • Switch Item
    • 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. Size
    6. With icons
    7. With many tabs
    8. 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

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>