Tabs

Tabs can be used to show a list of links in a tabbed format.

Default

svelte

<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>

Full Width

svelte

<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>

Bar

svelte

<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 Props

href	string
key	string

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