Listbox experimental
Ark UI Listbox 기반 wrapper입니다. 선택 가능한 항목 목록의 Root, Label, ValueText, Input, Content, Empty, ItemGroup, ItemGroupLabel, Item, ItemText, ItemIndicator anatomy를 제공합니다.
Preview
작업 영역 Recipe CSS
기반
토큰 설계
Recipe CSS
프레임워크
React wrapper
Svelte wrapper
<script lang="ts">
import { createListCollection } from '@odbd/svelte/listbox'
import * as Listbox from '@odbd/svelte/listbox'
const teams = createListCollection({
items: [
{ label: '토큰 설계', value: 'tokens', group: '기반' },
{ label: 'Recipe CSS', value: 'recipes', group: '기반' },
{ label: 'React wrapper', value: 'react', group: '프레임워크' },
{ label: 'Svelte wrapper', value: 'svelte', group: '프레임워크' },
],
itemToString: (item) => item.label,
itemToValue: (item) => item.value,
})
const groups = [
{
id: 'foundation',
label: '기반',
items: teams.items.filter((item) => item.group === '기반'),
},
{
id: 'framework',
label: '프레임워크',
items: teams.items.filter((item) => item.group === '프레임워크'),
},
]
</script>
<Listbox.Root collection={teams} defaultValue={['recipes']} loopFocus style="max-width: 30rem;">
<Listbox.Label>작업 영역</Listbox.Label>
<Listbox.ValueText placeholder="영역을 선택하세요" />
<Listbox.Input aria-label="항목 검색" placeholder="항목 이름으로 검색하세요" />
<Listbox.Content>
{#each groups as group}
<Listbox.ItemGroup id={group.id}>
<Listbox.ItemGroupLabel>{group.label}</Listbox.ItemGroupLabel>
{#each group.items as item}
<Listbox.Item {item} highlightOnHover>
<Listbox.ItemText>{item.label}</Listbox.ItemText>
<Listbox.ItemIndicator>✓</Listbox.ItemIndicator>
</Listbox.Item>
{/each}
</Listbox.ItemGroup>
{/each}
<Listbox.Empty>표시할 항목이 없어요.</Listbox.Empty>
</Listbox.Content>
</Listbox.Root>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as Listbox from '@odbd/svelte/listbox' import { Listbox } from '@odbd/react/listbox'