Tab

Tabbed navigation built from lt-tab-group (container) and lt-tab (individual tab). The active tab is controlled by value on the group.

Playground

Value

Appearance

Size

Theme

Label

Value

Icon Start

Active

Disabled

Size

HTMLReact

ShareCopy

Usage

<lt-tab-group value="tab1">
<lt-tab label="Overview" value="tab1" icon-start="home"></lt-tab>
<lt-tab label="Settings" value="tab2" icon-start="settings"></lt-tab>
<lt-tab label="Disabled" value="tab3" disabled></lt-tab>
</lt-tab-group>

<script type="module">
document.querySelector('lt-tab-group').addEventListener('change', (e) => {
  console.log('active tab:', e.detail.value);
});
</script>

import { TabGroup, Tab } from '@latty-ds/react';

<TabGroup value="tab1" onChange={(e) => console.log('active tab:', e.detail.value)}>
<Tab label="Overview" value="tab1" iconStart="home" />
<Tab label="Settings" value="tab2" iconStart="settings" />
<Tab label="Disabled" value="tab3" disabled />
</TabGroup>

<template>
<lt-tab-group value="tab1"
  @change="(e) => console.log('active tab:', e.detail.value)">
  <lt-tab label="Overview" value="tab1" icon-start="home"></lt-tab>
  <lt-tab label="Settings" value="tab2" icon-start="settings"></lt-tab>
  <lt-tab label="Disabled" value="tab3" disabled></lt-tab>
</lt-tab-group>
</template>

API — lt-tab-group

API — lt-tab