37 lines
No EOL
810 B
Svelte
37 lines
No EOL
810 B
Svelte
<script lang="ts">
|
|
import type { DaisySize } from '$lib/types';
|
|
import Tab from './Tab.svelte';
|
|
|
|
type Props = {
|
|
size?: DaisySize;
|
|
tabs: string[];
|
|
selected?: number;
|
|
variant?: 'none' | 'bordered' | 'lifted' | 'boxed';
|
|
};
|
|
|
|
let { size, tabs, selected: value = $bindable(0), variant = 'none' }: Props = $props();
|
|
</script>
|
|
|
|
<div
|
|
role="tablist"
|
|
class="tabs w-full"
|
|
class:tabs-xs={size === 'xs'}
|
|
class:tabs-sm={size === 'sm'}
|
|
class:tabs-lg={size === 'lg'}
|
|
class:tabs-xl={size === 'xl'}
|
|
class:tabs-bordered={variant === 'bordered'}
|
|
class:tabs-lifted={variant === 'lifted'}
|
|
class:tabs-boxed={variant === 'boxed'}
|
|
>
|
|
{#each tabs as tab, index}
|
|
{#key [tab, value]}
|
|
<Tab
|
|
active={index === value}
|
|
label={tab}
|
|
onclick={() => {
|
|
value = index;
|
|
}}
|
|
/>
|
|
{/key}
|
|
{/each}
|
|
</div> |