Splitter

원문 보기 위키 갱신 2026.10.11

Splitter (분할기)

화면을 여러 영역으로 나누고 크기를 조절할 수 있는 분할기 컴포넌트예요.

출처: 문서

본문

언제 사용하나요

화면 레이아웃의 여러 영역 크기를 동적으로 조절해야 할 때 사용하면 좋아요.

기본 사용법

:::demo

<template>
  <section>
    <d-splitter class="splitter-border" :orientation="orientation" :splitBarSize="splitBarSize" style="height: 300px">
      <template v-slot:DSplitterPane>
        <d-splitter-pane
          collapseDirection="before"
          :size="size"
          :minSize="minSize"
          :collapsible="true"
          @sizeChange="sizeChange"
          @collapsedChange="collapsedChange"
        >
          <div class="pane-content">
            <h2>Left</h2>
            <div>width: 30%, min-width: 20%</div>
          </div>
        </d-splitter-pane>
        <d-splitter-pane minSize="15%">
          <div class="pane-content">
            <h2>Right</h2>
            <div>Content</div>
          </div>
        </d-splitter-pane>
      </template>
    </d-splitter>
  </section>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'DSplitterDemoBasic',
  setup() {
    const orientation = ref('horizontal');
    const splitBarSize = '2px';
    // splitter pane input
    const size = ref('30%');
    const minSize = ref('20%');
    const maxSize = ref('60%');
    const sizeChange = (size) => {
      console.log(size);
    };
    const collapsedChange = (event) => {
      console.log(event);
    };

    return {
      orientation,
      splitBarSize,
      size,
      minSize,
      maxSize,
      sizeChange,
      collapsedChange,
    };
  },
});
</script>

<style>
.pane-content {
  padding: 0 12px;
}

.splitter-border {
  border: 1px solid #dfe1e6;
}
</style>

:::

세로 레이아웃 사용법

:::demo

<template>
  <section>
    <d-splitter style="height: 500px" class="splitter-border" orientation="vertical" :disableBarSize="disableBarSize">
      <template v-slot:DSplitterPane>
        <d-splitter-pane size="200px" minSize="150px" :collapsed="collapsed" :collapsible="true" @sizeChange="sizeChange">
          <div class="pane-content">
            <h2>Top</h2>
            <div>height: 200px</div>
          </div>
        </d-splitter-pane>
        <d-splitter-pane style="overflow: hidden">
          <div class="pane-content">
            <h2>Center</h2>
            <div>height: auto</div>
          </div>
        </d-splitter-pane>
        <d-splitter-pane size="150px" :resizable="false" :collapsible="true">
          <div class="pane-content">
            <h2>Bottom</h2>
            <div>height: 150px, resizable: false</div>
          </div>
        </d-splitter-pane>
      </template>
    </d-splitter>
  </section>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'DSplitterDemoVertical',
  setup() {
    const collapsed = ref(true);
    const disableBarSize = '2px';

    const sizeChange = (size) => {
      console.log(size);
    };

    return {
      disableBarSize,
      collapsed,
      sizeChange,
    };
  },
});
</script>

<style>
.pane-content {
  padding: 0 12px;
}

.splitter-border {
  border: 1px solid #dfe1e6;
}
</style>

:::

조합 레이아웃 사용법

:::demo

<template>
  <section>
    <d-splitter class="splitter-border" style="height: 600px" orientation="vertical">
      <template v-slot:DSplitterPane>
        <d-splitter-pane size="400px" minSize="100px" :sizeChange="sizeChange">
          <d-splitter style="height: 100%">
            <template v-slot:DSplitterPane>
              <d-splitter-pane size="30%" minSize="20%" :sizeChange="sizeChange">
                <div class="pane-content">
                  <h2>Left</h2>
                  <div>width: 30%, min-width: 20%</div>
                </div>
              </d-splitter-pane>
              <d-splitter-pane minSize="15%">
                <d-splitter style="height: 100%" orientation="vertical">
                  <template v-slot:DSplitterPane>
                    <d-splitter-pane size="50%" style="overflow: hidden">
                      <div class="pane-content">
                        <h2>Top</h2>
                        <div>height: 50%</div>
                      </div>
                    </d-splitter-pane>
                    <d-splitter-pane style="overflow: hidden">
                      <div class="pane-content">
                        <h2>Bottom</h2>
                        <div>height: auto</div>
                      </div>
                    </d-splitter-pane>
                  </template>
                </d-splitter>
              </d-splitter-pane>
            </template>
          </d-splitter>
        </d-splitter-pane>
        <d-splitter-pane style="overflow: hidden">
          <div class="pane-content">
            <h2>Bottom</h2>
            <div>height: auto</div>
          </div>
        </d-splitter-pane>
      </template>
    </d-splitter>
  </section>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'DSplitterDemoMulti',
  setup() {
    const sizeChange = (size) => {
      console.log(size);
    };

    return {
      sizeChange,
    };
  },
});
</script>

<style>
.pane-content {
  padding: 0 12px;
}

.splitter-border {
  border: 1px solid #dfe1e6;
}
</style>

:::

접힘 방향 지정하기

:::demo

<template>
  <section>
    <d-button variant="solid" @click="handleOperation" style="margin-bottom: 10px">{{buttonDesc}}</d-button>
    <d-splitter class="splitter-border" style="height: 300px">
      <template v-slot:DSplitterPane>
        <d-splitter-pane size="30%" minSize="20%" :sizeChange="sizeChange">
          <div class="pane-content">
            <h2>Left</h2>
            <div>width: 30%, min-width: 20%</div>
          </div>
        </d-splitter-pane>
        <d-splitter-pane minSize="15%" :collapsible="true" collapseDirection="before" ref="splitterPane">
          <div class="pane-content">
            <h2>Center</h2>
            <div>Specify the folding and retracting direction to fold forward</div>
          </div>
        </d-splitter-pane>
        <d-splitter-pane minSize="15%">
          <div class="pane-content">
            <h2>Right</h2>
            <div>Content</div>
          </div>
        </d-splitter-pane>
      </template>
    </d-splitter>
  </section>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'DSplitterDemoDirection',
  setup() {
    const buttonDesc = ref('收起');
    const splitterPane = ref();
    const collapsed = ref(false);
    const sizeChange = (size) => {
      console.log(size);
    };

    const handleOperation = () => {
      splitterPane.value.updateCollapsed();
      collapsed.value = !collapsed.value;
      buttonDesc.value = collapsed.value ? '展开' : '收起';
    };

    return {
      sizeChange,
      buttonDesc,
      splitterPane,
      handleOperation,
    };
  },
});
</script>

<style>
.pane-content {
  padding: 0 12px;
}

.splitter-border {
  border: 1px solid #dfe1e6;
}
</style>

:::

Splitter 파라미터

파라미터	타입	기본값	설명	Demo 링크
orientation	SplitterOrientation	'horizontal'	선택, Splitter 분할 방향 지정	기본 사용법
split-bar-size	`string`	'2px'	선택, 구분바 크기. 기본 2px	기본 사용법
disabled-bar-size	`string`	'1px'	선택, pane 너비 조정 불가 설정 시 유효	세로 레이아웃 사용법
show-collapse-button	`boolean`	true	선택, 접기/펼치기 버튼 표시 여부	접기/펼치기 메뉴 표시

SplitterPane 파라미터

파라미터	타입	기본값	설명	Demo 링크
size	`string`	--	선택, pane 너비 지정. 픽셀 값 또는 백분율	기본 사용법
min-size	`string`	--	선택, pane 최소 너비 지정. 픽셀 값 또는 백분율	기본 사용법
max-size	`string`	--	선택, pane 최대 너비 지정. 픽셀 값 또는 백분율	기본 사용법
resizable	`boolean`	true	선택, pane 크기 조정 가능 여부 지정. 인접 pane에 영향	세로 레이아웃 사용법
collapsible	`boolean`	false	선택, pane 접기 가능 여부 지정	기본 사용법
collapsed	`boolean`	false	선택, pane 초기 접힘 여부 지정. `collapsible`과 함께 사용	세로 레이아웃 사용법
collapse-direction	CollapseDirection	'both'	선택, 가장자리가 아닌 pane의 접기 방향 지정. `collapsible`과 함께 사용	접기 방향 지정

SplitterPane 이벤트

이벤트	타입	설명	Demo 링크
size-change	`(size: string) => void`	크기 변경 시 변경된 값 반환. 픽셀 값 또는 백분율	기본 사용법
collapsed-change	`(collapsed: boolean>) => void`	접기/펼치기 시 현재 pane의 접힘 여부 반환	기본 사용법

SplitterPane 메서드

메서드명	타입	설명	Demo 링크
updateCollapsed	`(collapsed?: boolean) => void`	패널 접힘 상태 갱신. 파라미터로 패널 접힘 상태 지정 가능	접기 방향 지정

Splitter 타입 정의

SplitterOrientation

export type SplitterOrientation = 'vertical' | 'horizontal';

CollapseDirection

export type CollapseDirection = 'before' | 'after' | 'both';

더 알아보기 (Learn more)

Splitter와 SplitterPane을 중첩하면 복잡한 레이아웃도 만들 수 있어요. sizeChange 같은 이벤트로 크기 변화에 반응해 보세요.