Drawer experimental
Ark UI Drawer 기반 wrapper입니다. 양쪽 프레임워크에서 동일한 Drawer anatomy를 제공합니다.
Preview
알림 설정
팀 알림을 받을 채널과 시간을 조정하세요.
<script lang="ts">
import { Checkbox } from '@odbd/svelte'
import * as Drawer from '@odbd/svelte/drawer'
import * as Select from '@odbd/svelte/select'
import { createListCollection } from '@odbd/svelte/select'
const times = createListCollection({ items: ['오전 9시', '오후 1시', '오후 6시'] })
</script>
<div class="drawer-demo">
<Drawer.Root>
<Drawer.Trigger class="odbd-button" data-variant="solid" data-size="md">
알림 설정 열기
</Drawer.Trigger>
<Drawer.Backdrop />
<Drawer.Positioner>
<Drawer.Content>
<Drawer.Grabber>
<Drawer.GrabberIndicator />
</Drawer.Grabber>
<div class="drawer-demo__header">
<div>
<Drawer.Title>알림 설정</Drawer.Title>
<Drawer.Description>팀 알림을 받을 채널과 시간을 조정하세요.</Drawer.Description>
</div>
<Drawer.CloseTrigger
class="odbd-button"
data-variant="ghost"
data-size="icon"
aria-label="닫기"
>
×
</Drawer.CloseTrigger>
</div>
<div class="drawer-demo__body">
<Checkbox label="이메일 알림" checked />
<Checkbox label="긴급 알림" />
<div class="drawer-demo__field">
<Select.Root collection={times} defaultValue={['오전 9시']}>
<Select.Label>요약 시간</Select.Label>
<Select.Control>
<Select.Trigger>
<Select.ValueText />
<Select.Indicator>▾</Select.Indicator>
</Select.Trigger>
</Select.Control>
<Select.Positioner>
<Select.Content>
{#each times.items as item}
<Select.Item {item}>
<Select.ItemText>{item}</Select.ItemText>
<Select.ItemIndicator>✓</Select.ItemIndicator>
</Select.Item>
{/each}
</Select.Content>
</Select.Positioner>
<Select.HiddenSelect />
</Select.Root>
</div>
</div>
<div class="drawer-demo__actions">
<Drawer.CloseTrigger class="odbd-button" data-variant="outline" data-size="md">
취소
</Drawer.CloseTrigger>
<button type="button" class="odbd-button" data-variant="solid" data-size="md">
저장
</button>
</div>
</Drawer.Content>
</Drawer.Positioner>
</Drawer.Root>
</div>
<style>
.drawer-demo {
display: grid;
justify-items: center;
}
.drawer-demo :global([data-part='trigger']) {
inline-size: fit-content;
min-inline-size: 12rem;
padding-inline: var(--odbd-space-5);
}
.drawer-demo__header,
.drawer-demo__actions {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--odbd-space-3);
}
.drawer-demo__body {
display: grid;
gap: var(--odbd-space-3);
max-width: 22rem;
}
.drawer-demo__field {
display: flex;
align-items: flex-start;
flex-direction: column;
gap: var(--odbd-space-3);
}
.drawer-demo__actions {
justify-content: flex-end;
}
</style>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as Drawer from '@odbd/svelte/drawer' import { Drawer } from '@odbd/react/drawer'