Swap experimental
Ark UI Swap 기반 wrapper입니다. 상태 전환에 따라 on/off 콘텐츠를 교체하는 root, indicator anatomy를 제공합니다.
Preview
선택한 항목을 바로 보관해요.
<script lang="ts">
import * as Swap from '@odbd/svelte/swap'
let archived = $state(false)
</script>
<div class="swap-demo">
<button
type="button"
class="odbd-button"
data-variant="outline"
data-size="md"
aria-pressed={archived}
onclick={() => (archived = !archived)}
>
<Swap.Root swap={archived} lazyMount unmountOnExit>
<Swap.Indicator type="off">보관</Swap.Indicator>
<Swap.Indicator type="on">보관됨</Swap.Indicator>
</Swap.Root>
</button>
<p>{archived ? '선택한 항목을 보관했어요.' : '선택한 항목을 바로 보관해요.'}</p>
</div>
<style>
.swap-demo {
display: grid;
max-width: 30rem;
gap: var(--odbd-space-3);
align-items: start;
}
.swap-demo p {
margin: 0;
color: var(--odbd-color-muted-foreground);
font-size: var(--odbd-font-size-sm);
}
.swap-demo .odbd-button {
min-width: 6rem;
}
</style>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as Swap from '@odbd/svelte/swap' import { Swap } from '@odbd/react/swap'