TagsInput experimental
Ark UI TagsInput 기반 wrapper입니다. 토큰을 입력해 태그 목록을 편집하는 입력 컨트롤의 anatomy를 제공합니다.
Preview
<script lang="ts">
import * as TagsInput from '@odbd/svelte/tags-input'
let value = $state(['Svelte', 'React'])
</script>
<TagsInput.Root
{value}
onValueChange={(details: { value: string[] }) => (value = details.value)}
style="max-width: 20rem;"
>
<TagsInput.Label>관심 프레임워크</TagsInput.Label>
<TagsInput.Control>
{#each value as tag, index}
<TagsInput.Item {index} value={tag}>
<TagsInput.ItemPreview>
<TagsInput.ItemText>{tag}</TagsInput.ItemText>
<TagsInput.ItemDeleteTrigger>×</TagsInput.ItemDeleteTrigger>
</TagsInput.ItemPreview>
<TagsInput.ItemInput />
</TagsInput.Item>
{/each}
<TagsInput.Input placeholder="태그를 입력하세요" />
<TagsInput.ClearTrigger>지우기</TagsInput.ClearTrigger>
</TagsInput.Control>
<TagsInput.HiddenInput />
</TagsInput.Root>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as TagsInput from '@odbd/svelte/tags-input' import { TagsInput } from '@odbd/react/tags-input'