스플리터

스플리터 (Splitter)

출처: 문서

본문

영역을 가로 또는 세로로 나누고, 각 영역의 크기를 자유롭게 드래그해서 조절할 수 있는 컴포넌트예요.

기본 사용법 (Basic Usage)

가장 기본적인 사용법으로, 기본 크기를 전달하지 않으면 자동으로 균등하게 나눠져요.

        2

.demo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

세로 (Vertical)

세로 방향으로 사용해요.

        2

.demo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

접기 (Collapsible)

collapsible을 설정하면 빠르게 축소할 수 있는 기능을 제공해요. min 속성을 사용하면 접은 뒤 드래그로 확장하는 것을 막을 수 있어요.

        2

        3
            4

            5

import { ref } from 'vue'

const isCollapsible = ref(true)

.demo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

드래그 비활성화 (Disable Drag)

어느 한 패널이 resizable을 비활성화하면 드래그가 비활성화돼요.

          drag {{ resizable ? 'enable' : 'disable' }}

        3

import { ref } from 'vue'

const resizable = ref(false)

.demo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

패널 크기 (Panel Size)

v-model:size로 패널 크기를 가져올 수 있어요.

        {{ size }}px

        3

import { ref } from 'vue'

const size = ref(100)

const handleResizeStart = (index: number, sizes: number[]) => {
  console.log('resizeStart', index, sizes)
}

const handleResize = (index: number, sizes: number[]) => {
  console.log('resize', index, sizes)
}

const handleResizeEnd = (index: number, sizes: number[]) => {
  console.log('resizeEnd', index, sizes)
}

.demo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

지연 모드 (Lazy)

lazy를 활성화하면 드래그 중에는 패널 크기가 실시간으로 업데이트되지 않고, 드래그가 끝난 뒤에만 업데이트돼요.

        2

        3

.demo-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

Splitter API

Splitter 속성 (Attributes)

Splitter 이벤트 (Events)

SplitterPanel API

SplitterPanel 속성 (Attributes)

SplitterPanel 이벤트 (Events)

SplitterPanel 슬롯 (Slots)

SplitterPanel Exposes

더 알아보기 (Learn more)