Tabs

A set of panels that allow you to switch between different views.

Styled Content

Active Tab

You can set the active tab by passing the key of the tab to the activeTab prop. You can also bind to this prop if you want to do something when it changes.

<script lang="ts">
    import { TabsList, Tab, type TabHeader } from 'ato-ui';
 
    let activeTab = 'styled';
 
    const tabHeaders: TabHeader = [
        // ...
    ];
 
    $: console.log(activeTab);
</script>
 
<TabsList bind:activeTab {tabHeaders} disabledTabs={['extra']} ariaLabel="disabled tabs example">
    <!-- ... -->
</TabsList>

Disable Tabs

You can disable tabs by passing in a list of their keys to the disabledTabs prop.

<TabsList {activeTab} {tabHeaders} disabledTabs={['extra']} ariaLabel="disabled tabs example">
    <Tab key="styled">Styled Content</Tab>
    <Tab key="headless">Headless Content</Tab>
    <Tab key="extra">Extra Content</Tab>
</TabsList>

Change Spacing

You can adjust the headers spacings using the justifyHeaders prop.

<TabsList {activeTab} {tabHeaders} justifyHeaders="justify-around" ariaLabel="spacing example">
    <Tab key="styled">Styled Content</Tab>
    <Tab key="headless">Headless Content</Tab>
    <Tab key="extra">Extra Content</Tab>
</TabsList>

API

Props

Tabs.Root

value

A writable store that can be used to read and update the tabs value. You can use this to set the default active tab.

disabledTabs

boolean | string[]

[]

Set the tabs that should be disabled. You can pass individual tabs in a list of strings or disable all tabs by setting this prop to 'true'.

tabHeaders

Set the tab headers. For each header provide a key, a title, and optionally an iconify icon.

   
ariaLabel
:
  string
Aria label for the tabs.

borderStyle

string

'border-b-1 border-surface-100-200'

Set the border style.

activeStyle

string

'primary-500'

Set the active header styles.

inactiveStyle

string

'text-surface-900-50 hover:primary-500/60'

Set the in-active header styles.

headerWidth

string

'min-w-40'

Set the header width.

headerStyle

string

'rounded-btn-t px-2 py-1'

Set the header styles.

justifyHeaders

string

'justify-center'

Set how the headers should be aligned with the justify property.

Tabs.Tab

   
key
:
  string
Provide the key of the tab content.
Should be the same as the header key it belongs to.