RatingGroup experimental
Ark UI RatingGroup 기반 wrapper입니다. 별점 입력을 위한 root, label, control, item, hidden-input anatomy를 제공합니다.
Preview
<script lang="ts">
import * as RatingGroup from '@odbd/svelte/rating-group'
</script>
<RatingGroup.Root count={5} defaultValue={3}>
<RatingGroup.Label>디자인 시스템 평가</RatingGroup.Label>
<RatingGroup.Control>
<RatingGroup.Context>
{#snippet render(api)}
{#each api().items as index (index)}
<RatingGroup.Item {index}>
<RatingGroup.ItemContext>
{#snippet render(item)}
{item().highlighted ? '★' : '☆'}
{/snippet}
</RatingGroup.ItemContext>
</RatingGroup.Item>
{/each}
{/snippet}
</RatingGroup.Context>
</RatingGroup.Control>
<RatingGroup.HiddenInput />
</RatingGroup.Root>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as RatingGroup from '@odbd/svelte/rating-group' import { RatingGroup } from '@odbd/react/rating-group'