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이 알맞습니다.

두 영역 배치
left·right 슬롯을 사용합니다. 세로 분할에서도 슬롯 이름은 같습니다. 부모의 높이를 먼저 확보하세요.
비율과 한계 설정
ratio는 왼쪽 또는 위쪽 영역의 비율(%)입니다. minRatio로 양쪽의 최소 비율을 정합니다.
변경 결과 연결
방향에 맞는 변경 이벤트에서 앱의 크기 상태를 갱신하세요.

예제

좌우 분할

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

코드 보기

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>

기능별 예제

8개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.