Segment Group experimental
Ark UI Segment Group 기반 wrapper입니다. 선택지가 적은 설정 전환에 사용합니다.
Preview
<script lang="ts">
import * as SegmentGroup from '@odbd/svelte/segment-group'
const modes = ['light', 'dark', 'system']
</script>
<div class="segment-demo">
<SegmentGroup.Root defaultValue="light" orientation="horizontal">
<SegmentGroup.Indicator />
{#each modes as mode}
<SegmentGroup.Item value={mode}>
<SegmentGroup.ItemText>{mode}</SegmentGroup.ItemText>
<SegmentGroup.ItemControl />
<SegmentGroup.ItemHiddenInput />
</SegmentGroup.Item>
{/each}
</SegmentGroup.Root>
</div>
<style>
.segment-demo {
display: grid;
justify-items: center;
}
.segment-demo :global(.odbd-segment-group) {
inline-size: fit-content;
}
</style>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as SegmentGroup from '@odbd/svelte/segment-group' import { SegmentGroup } from '@odbd/react/segment-group'