Menu experimental
Ark UI Menu 기반 wrapper입니다. button trigger로 열리는 작업 목록을 제공하며, Trigger/Positioner/Content/Item/Separator/ItemGroup/ItemGroupLabel anatomy를 제공합니다.
Preview
<script lang="ts">
import * as Menu from '@odbd/svelte/menu'
let showLineNumbers = $state(true)
let theme = $state('system')
</script>
<div style="max-width: 30rem;">
<Menu.Root>
<Menu.Trigger class="odbd-button" data-variant="outline" data-size="md">
보기 메뉴
<Menu.Indicator>▾</Menu.Indicator>
</Menu.Trigger>
<Menu.Positioner>
<Menu.Content>
<Menu.ItemGroup>
<Menu.ItemGroupLabel>빠른 작업</Menu.ItemGroupLabel>
<Menu.Item value="open-dashboard">대시보드 열기</Menu.Item>
<Menu.Item value="copy-link">공유 링크 복사</Menu.Item>
<Menu.Item value="manage-permissions" disabled>권한 관리</Menu.Item>
</Menu.ItemGroup>
<Menu.Separator />
<Menu.CheckboxItem
value="line-numbers"
checked={showLineNumbers}
onCheckedChange={(checked) => (showLineNumbers = checked)}
>
<Menu.ItemText>줄 번호 표시</Menu.ItemText>
<Menu.ItemIndicator>✓</Menu.ItemIndicator>
</Menu.CheckboxItem>
<Menu.Separator />
<Menu.RadioItemGroup value={theme} onValueChange={(e) => (theme = e.value)}>
<Menu.ItemGroupLabel>테마</Menu.ItemGroupLabel>
<Menu.RadioItem value="system">
<Menu.ItemText>시스템</Menu.ItemText>
<Menu.ItemIndicator>✓</Menu.ItemIndicator>
</Menu.RadioItem>
<Menu.RadioItem value="light">
<Menu.ItemText>라이트</Menu.ItemText>
<Menu.ItemIndicator>✓</Menu.ItemIndicator>
</Menu.RadioItem>
<Menu.RadioItem value="dark">
<Menu.ItemText>다크</Menu.ItemText>
<Menu.ItemIndicator>✓</Menu.ItemIndicator>
</Menu.RadioItem>
</Menu.RadioItemGroup>
<Menu.Separator />
<Menu.Item value="sign-out">로그아웃</Menu.Item>
</Menu.Content>
</Menu.Positioner>
</Menu.Root>
</div>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as Menu from '@odbd/svelte/menu' import { Menu } from '@odbd/react/menu'