이 사이트는 shadcn-svelte 공식 문서의 한국어 번역입니다.
6.9k

Resizable

Previous Next

키보드 지원이 포함된 접근 가능한 크기 조절 패널 그룹 및 레이아웃입니다.

Docs API Reference
하나
둘
셋
<script lang="ts">
  import * as Resizable from "$lib/components/ui/resizable/index.js";
</script>
 
<Resizable.PaneGroup direction="horizontal" class="max-w-md rounded-lg border">
  <Resizable.Pane defaultSize={50}>
    <div class="flex h-[200px] items-center justify-center p-6">
      <span class="font-semibold">하나</span>
    </div>
  </Resizable.Pane>
  <Resizable.Handle />
  <Resizable.Pane defaultSize={50}>
    <Resizable.PaneGroup direction="vertical">
      <Resizable.Pane defaultSize={25}>
        <div class="flex h-full items-center justify-center p-6">
          <span class="font-semibold">둘</span>
        </div>
      </Resizable.Pane>
      <Resizable.Handle />
      <Resizable.Pane defaultSize={75}>
        <div class="flex h-full items-center justify-center p-6">
          <span class="font-semibold">셋</span>
        </div>
      </Resizable.Pane>
    </Resizable.PaneGroup>
  </Resizable.Pane>
</Resizable.PaneGroup>

소개

Resizable 컴포넌트는 Huntabyte의 PaneForge를 기반으로 구축되었습니다. Resizable 컴포넌트의 사용 가능한 모든 props와 기능은 PaneForge 문서를 참조하세요.

설치

pnpm dlx shadcn-svelte@latest add resizable

사용법

<script lang="ts">
  import * as Resizable from "$lib/components/ui/resizable/index.js";
</script>
<Resizable.PaneGroup direction="horizontal">
  <Resizable.Pane>하나</Resizable.Pane>
  <Resizable.Handle />
  <Resizable.Pane>둘</Resizable.Pane>
</Resizable.PaneGroup>

예제

수직

direction prop을 사용하여 크기 조절 패널의 방향을 설정합니다.

헤더
컨텐츠
<script lang="ts">
  import * as Resizable from "$lib/components/ui/resizable/index.js";
</script>
 
<Resizable.PaneGroup
  direction="vertical"
  class="min-h-[200px] max-w-md rounded-lg border"
>
  <Resizable.Pane defaultSize={25}>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">헤더</span>
    </div>
  </Resizable.Pane>
  <Resizable.Handle />
  <Resizable.Pane defaultSize={75}>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">컨텐츠</span>
    </div>
  </Resizable.Pane>
</Resizable.PaneGroup>
<script lang="ts">
  import * as Resizable from "$lib/components/ui/resizable/index.js";
</script>
 
<Resizable.PaneGroup direction="vertical">
  <Resizable.Pane>하나</Resizable.Pane>
  <Resizable.Handle />
  <Resizable.Pane>둘</Resizable.Pane>
</Resizable.PaneGroup>

핸들

ResizableHandle 컴포넌트의 withHandle prop을 사용하여 핸들을 설정하거나 숨길 수 있습니다.

사이드바
컨텐츠
<script lang="ts">
  import * as Resizable from "$lib/components/ui/resizable/index.js";
</script>
 
<Resizable.PaneGroup
  direction="horizontal"
  class="min-h-[200px] max-w-md rounded-lg border"
>
  <Resizable.Pane defaultSize={25}>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">사이드바</span>
    </div>
  </Resizable.Pane>
  <Resizable.Handle withHandle />
  <Resizable.Pane defaultSize={75}>
    <div class="flex h-full items-center justify-center p-6">
      <span class="font-semibold">컨텐츠</span>
    </div>
  </Resizable.Pane>
</Resizable.PaneGroup>
<script lang="ts">
  import * as Resizable from "$lib/components/ui/resizable/index.js";
</script>
 
<Resizable.PaneGroup direction="vertical">
  <Resizable.Pane>하나</Resizable.Pane>
  <Resizable.Handle withHandle />
  <Resizable.Pane>둘</Resizable.Pane>
</Resizable.PaneGroup>