Tabs experimental
Ark UI Tabs 기반 wrapper입니다. list, trigger, content, indicator anatomy를 제공합니다.
Preview
@odbd/svelte wrapper 사용 예시를 보여줘요.
@odbd/react wrapper 사용 예시를 보여줘요.
anatomy 클래스와 recipe 토큰을 보여줘요.
<script lang="ts">
import * as Tabs from '@odbd/svelte/tabs'
const items = [
{ value: 'svelte', label: 'Svelte', body: '@odbd/svelte wrapper 사용 예시를 보여줘요.' },
{ value: 'react', label: 'React', body: '@odbd/react wrapper 사용 예시를 보여줘요.' },
{ value: 'css', label: 'CSS', body: 'anatomy 클래스와 recipe 토큰을 보여줘요.' },
]
</script>
<Tabs.Root defaultValue="svelte">
<Tabs.List>
{#each items as tab}
<Tabs.Trigger value={tab.value}>{tab.label}</Tabs.Trigger>
{/each}
</Tabs.List>
{#each items as tab}
<Tabs.Content value={tab.value}>{tab.body}</Tabs.Content>
{/each}
</Tabs.Root>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as Tabs from '@odbd/svelte/tabs' import { Tabs } from '@odbd/react/tabs'