Splitter experimental

Ark UI Splitter 기반 wrapper입니다. 크기 조절 가능한 패널 레이아웃을 위한 root, panel, resizeTrigger, resizeTriggerIndicator anatomy를 제공합니다.

@ark-ui/svelte/splitter Ark UI docs ↗

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'