Splitter experimental
Ark UI Splitter 기반 wrapper입니다. 크기 조절 가능한 패널 레이아웃을 위한 root, panel, resizeTrigger, resizeTriggerIndicator anatomy를 제공합니다.
Preview
loading…
<script lang="ts">
import * as Splitter from '@odbd/svelte/splitter'
const panels = [
{ id: 'nav', minSize: 20 },
{ id: 'main', minSize: 30 },
]
</script>
<Splitter.Root {panels} style="height: 12rem;">
<Splitter.Panel id="nav">탐색 영역을 담아요.</Splitter.Panel>
<Splitter.ResizeTrigger id="nav:main" aria-label="패널 크기 조절">
<Splitter.ResizeTriggerIndicator />
</Splitter.ResizeTrigger>
<Splitter.Panel id="main">본문 영역을 담아요.</Splitter.Panel>
</Splitter.Root>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import * as Splitter from '@odbd/svelte/splitter' import { Splitter } from '@odbd/react/splitter'