Tabs - Lithesome

Preview

Code

<script>
	import { Tabs, TabsButton, TabsContent, TabsList } from 'lithesome';
	import { Button, Container } from '$site/index.js';

	const tabs = [
		{
			value: 'Recent',
			items: [
				{ title: 'About the bird?', time: '1h ago', author: 'Gibbu' },
				{ title: 'Have you heard?', time: '3h ago', author: 'Gibbu' }
			]
		},
		{
			value: 'Popular',
			items: [
				{ title: 'Is Microsoft bad?', time: '25th Jan', author: 'Johnny' },
				{ title: 'Vibe code to infinity!', time: '3rd Jan', author: 'James' }
			]
		}
	];
</script>

<Tabs class="w-[60%]">
	<TabsList class="mb-3 flex gap-2">
		{#each tabs as tab}
			<TabsButton
				value={tab.value}
				class={({ active }) => [
					'cursor-pointer rounded-full px-3 py-2 text-sm select-none',
					active ? 'bg-black/5 dark:bg-white/10' : 'hover:bg-black/5 hover:dark:bg-white/5'
				]}
			>
				{#snippet custom({ props, state })}
					<Button variant={state.active ? 'primary' : 'text'} {...props}>
						{tab.value}
					</Button>
				{/snippet}
			</TabsButton>
		{/each}
	</TabsList>

	{#each tabs as tab}
		<TabsContent value={tab.value}>
			{#snippet custom({ props })}
				<Container {...props}>
					{#each tab.items as item}
						<div class="px-6 py-3 hover:bg-black/5 dark:hover:bg-white/5">
							<span class="block font-semibold">{item.title}</span>
							<small class="block opacity-50">{item.time} · {item.author}</small>
						</div>
					{/each}
				</Container>
			{/snippet}
		</TabsContent>
	{/each}
</Tabs>

Basic Example

<script>
	import { Tabs, TabsButton, TabsContent, TabsList } from 'lithesome';
</script>

<Tabs>
	<TabsList>
		<TabButton value="tab-1">Tab 1</TabButton>
		<TabButton value="tab-2">Tab 2</TabButton>
	</TabsList>

	<TabsContent value="tab-1">Tab 1 content</TabsContent>
	<TabsContent value="tab-2">Tab 2 content</TabsContent>
</Tabs>

API Reference

<Tabs />

Property	Type	Description
`value`	string	The current value.
`orientation`	Orientation	The direction of the tabs.
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`activeTab`	string	The value of the current active tab.

<TabsList />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`activeTab`	string	The value of the current active tab.

<TabsButton />

Property	Type	Description
`value`	string	The unique ID of the panel to map this button to.
`disabled`	boolean	Disables the button, skipping mouse/keyboard navigation and stopping events from firing.
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`active`	boolean	True if the item is active.

<TabsContent />

Property	Type	Description
`value`	string	The unique ID of the panel.
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`active`	boolean	True if the item is active.