Tabs
Tabs can be used to show a list of links in a tabbed format.
Usage
import { Tabs } from 'stwui';
import Tabs from 'stwui/tabs';
<script lang="ts">
import { Tabs } from 'stwui';
const home = "svg-path";
const check = "svg-path";
const info = "svg-path";
interface Tab {
href: string;
title: string;
data: string;
}
const tabs: Tab[] = [
{
href: '#tab1',
title: 'Tab 1',
data: home
},
{
href: '#tab2',
title: 'Tab 2',
data: check
},
{
href: '#tab3',
title: 'Tab 3',
data: info
}
];
let currentTab = '#tab1';
</script>
<Tabs {currentTab}>
{#each tabs as tab, i}
<Tabs.Tab key={tab.href} href={tab.href} on:click={() => (currentTab = tab.href)}>
<Tabs.Tab.Icon slot="icon" data={tab.data} />
{tab.title}
</Tabs.Tab>
{/each}
</Tabs>
<script lang="ts">
import { Tabs } from 'stwui';
const home = "svg-path";
const check = "svg-path";
const info = "svg-path";
interface Tab {
href: string;
title: string;
data: string;
}
const tabs: Tab[] = [
{
href: '#tab1',
title: 'Tab 1',
data: home
},
{
href: '#tab2',
title: 'Tab 2',
data: check
},
{
href: '#tab3',
title: 'Tab 3',
data: info
}
];
let currentTab = '#tab1';
</script>
<Tabs {currentTab} variant="full-width">
{#each tabs as tab, i}
<Tabs.Tab key={tab.href} href={tab.href} on:click={() => (currentTab = tab.href)}>
<Tabs.Tab.Icon slot="icon" data={tab.data} />
{tab.title}
</Tabs.Tab>
{/each}
</Tabs>
<script lang="ts">
import { Tabs } from 'stwui';
const home = "svg-path";
const check = "svg-path";
const info = "svg-path";
interface Tab {
href: string;
title: string;
data: string;
}
const tabs: Tab[] = [
{
href: '#tab1',
title: 'Tab 1',
data: home
},
{
href: '#tab2',
title: 'Tab 2',
data: check
},
{
href: '#tab3',
title: 'Tab 3',
data: info
}
];
let currentTab = '#tab1';
</script>
<Tabs {currentTab} variant="bar">
{#each tabs as tab, i}
<Tabs.Tab key={tab.href} href={tab.href} on:click={() => (currentTab = tab.href)}>
<Tabs.Tab.Icon slot="icon" data={tab.data} />
{tab.title}
</Tabs.Tab>
{/each}
</Tabs>
Tabs Props
| currentTab | string | |
| variant | 'default' | 'full-width' | 'bar' | default |
| containerClass | string | undefined | |
Tabs Slots
| default | <Tabs.Tab /> |
Tabs.Tab Slots
| icon | <Tabs.Tab.Icon slot="icon" /> |
| default | |
Tabs.Tab.Icon Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 |
| size | string | 24px |
| width | string | 24px |
| height | string | 24px |
| color | string | currentColor |
| stroke | string | undefined | |
| fill | string | currentColor |
Tabs Class Identifiers
| stwui-tabs-wrapper |
| stwui-tabs |
| stwui-tabs-bar-wrapper |
| stwui-tabs-bar |
| stwui-tab |
