syidaxdesign system
홈 가격 내 정보
ComponentsLayout

Split Panel

두 콘텐츠 영역을 나누고 구분선을 움직여 크기를 조절합니다.

<sy-split-panel>설치 안내 기본 사용법
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
HTML
<sy-split-panel
  type="horizontal"
  ratio="40"
  minratio="20"
  style="height:260px;width:100%"
>
  <div slot="left"
    style="height:100%;padding:20px;background:rgba(103,80,164,.06)"
  ><strong>목록</strong>
    <p>크기를 조절해 보세요.</p>
  </div>
  <div slot="right"
    style="height:100%;padding:20px;background:rgba(103,80,164,.12)"
  ><strong>상세 내용</strong>
    <p>구분선은 키보드로도 조절할 수 있습니다.</p>
  </div>
</sy-split-panel>

사용 가이드

#

탐색기·편집기처럼 두 영역을 동시에 보며 크기를 조절할 때 사용합니다. 고정 사이드바라면 Layout이 알맞습니다.

  1. 두 영역 배치

    left·right 슬롯을 사용합니다. 세로 분할에서도 슬롯 이름은 같습니다. 부모의 높이를 먼저 확보하세요.

  2. 비율과 한계 설정

    ratio는 왼쪽 또는 위쪽 영역의 비율(%)입니다. minRatio로 양쪽의 최소 비율을 정합니다.

  3. 변경 결과 연결

    방향에 맞는 변경 이벤트에서 앱의 크기 상태를 갱신하세요.

예제

#

좌우 분할

구분선을 드래그하거나 좌우 방향키로 조절합니다.

코드 보기
HTML
<sy-split-panel
  ratio="40"
  minratio="20"
  style="height:260px;width:100%"
>
  <div slot="left"
    style="height:100%;padding:20px;background:rgba(103,80,164,.06)"
  ><strong>목록</strong>
    <p>크기를 조절해 보세요.</p>
  </div>
  <div slot="right"
    style="height:100%;padding:20px;background:rgba(103,80,164,.12)"
  ><strong>상세 내용</strong>
    <p>구분선은 키보드로도 조절할 수 있습니다.</p>
  </div>
</sy-split-panel>

상하 분할

상하 방향키로 위쪽 영역의 비율을 조절합니다.

코드 보기
HTML
<sy-split-panel
  type="vertical"
  ratio="45"
  minratio="20"
  style="height:260px;width:100%"
>
  <div slot="left"
    style="height:100%;padding:20px;background:rgba(103,80,164,.06)"
  ><strong>목록</strong>
    <p>크기를 조절해 보세요.</p>
  </div>
  <div slot="right"
    style="height:100%;padding:20px;background:rgba(103,80,164,.12)"
  ><strong>상세 내용</strong>
    <p>구분선은 키보드로도 조절할 수 있습니다.</p>
  </div>
</sy-split-panel>

최소 공간 확보

양쪽 영역이 각각 30%보다 작아지지 않게 제한합니다.

코드 보기
HTML
<sy-split-panel
  ratio="50"
  minratio="30"
  style="height:260px;width:100%"
>
  <div slot="left"
    style="height:100%;padding:20px;background:rgba(103,80,164,.06)"
  ><strong>목록</strong>
    <p>크기를 조절해 보세요.</p>
  </div>
  <div slot="right"
    style="height:100%;padding:20px;background:rgba(103,80,164,.12)"
  ><strong>상세 내용</strong>
    <p>구분선은 키보드로도 조절할 수 있습니다.</p>
  </div>
</sy-split-panel>

고정 비율

disabled는 조절을 막고 hideDivider는 구분선을 숨깁니다.

코드 보기
HTML
<sy-split-panel
  ratio="40"
  disabled
  hidedivider
  style="height:260px;width:100%"
>
  <div slot="left"
    style="height:100%;padding:20px;background:rgba(103,80,164,.06)"
  ><strong>목록</strong>
    <p>크기를 조절해 보세요.</p>
  </div>
  <div slot="right"
    style="height:100%;padding:20px;background:rgba(103,80,164,.12)"
  ><strong>상세 내용</strong>
    <p>구분선은 키보드로도 조절할 수 있습니다.</p>
  </div>
</sy-split-panel>

이벤트와 전달 값

컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.

코드 보기
HTML
<sy-split-panel
  type="horizontal"
  ratio="40"
  minratio="20"
  style="height:260px;width:100%"
>
  <div slot="left"
    style="height:100%;padding:20px;background:rgba(103,80,164,.06)"
  ><strong>목록</strong>
    <p>크기를 조절해 보세요.</p>
  </div>
  <div slot="right"
    style="height:100%;padding:20px;background:rgba(103,80,164,.12)"
  ><strong>상세 내용</strong>
    <p>구분선은 키보드로도 조절할 수 있습니다.</p>
  </div>
</sy-split-panel>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  for (const name of ["horizontalChanged", "verticalChanged"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

구분선 없는 분할

구분선을 숨기고 두 영역을 60:40 비율로 배치합니다.

코드 보기
HTML
<sy-split-panel
  type="horizontal"
  ratio="60"
  minratio="20"
  hidedivider
  style="height:260px;width:100%"
  id="supplement-1"
>
  <div slot="left"
    style="height:100%;padding:20px;background:rgba(103,80,164,.06)"
  ><strong>목록</strong>
    <p>크기를 조절해 보세요.</p>
  </div>
  <div slot="right"
    style="height:100%;padding:20px;background:rgba(103,80,164,.12)"
  ><strong>상세 내용</strong>
    <p>구분선은 키보드로도 조절할 수 있습니다.</p>
  </div>
</sy-split-panel>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "ratio": 60,
    "hideDivider": true
  });
</script>

API reference

#

이름에 마우스를 올리거나 키보드로 선택하면 적용 코드를 확인할 수 있습니다. 터치 화면에서는 이름을 누르세요.

<sy-split-panel>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalse구분선의 드래그와 키보드 조절을 막습니다.
booleanfalse패널 사이의 크기 조절선을 숨깁니다.
number0양쪽 영역의 최소 비율(%)입니다. 유효 범위는 0~50입니다.
number50왼쪽 또는 위쪽 영역의 비율(%)입니다.
'horizontal' | 'vertical''horizontal'horizontal은 좌우, vertical은 상하 분할입니다.

Events

EventDetailDescription
CustomEvent<{ leftRatio: number; rightRatio: number; }>이벤트의 detail에서 결과를 확인하세요.
CustomEvent<{ topRatio: number; bottomRatio: number; }>이벤트의 detail에서 결과를 확인하세요.

Slots

SlotDescription
left 영역에 표시할 내용입니다.
right 영역에 표시할 내용입니다.
Design SystemTab 이동 Enter 열기