Drawer

현재 화면의 맥락을 유지하며 가장자리에서 보조 패널을 엽니다.

<sy-drawer>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

위치크기사용자 크기(px)애니메이션

닫기 버튼배경 마스크 생략배경 클릭으로 닫기사용자 닫기 방지

코드 보기

HTML

<sy-button id="open-drawer">상세 패널 열기</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="280"
  position="right"
  mask-closable
  animation="none"
  id="sample"
><strong slot="header">프로젝트 정보</strong>
  <div slot="body">
    <p>담당자 · Alex Kim</p>
    <p>진행 상태 · 검토 중</p>
  </div>
  <sy-button slot="footer" id="close-drawer">확인</sy-button>
</sy-drawer>

<script type="module">
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
</script>

사용 가이드

현재 화면을 유지하면서 상세 정보나 보조 설정을 보여줍니다. 반드시 결정을 받아야 한다면 Modal을 사용하세요.

위치와 크기: position으로 방향을 정합니다. 사용자 지정 크기는 size="custom"과 customSize(px)를 사용하세요.
내용 구성: header·body·footer 슬롯으로 제목, 상세 내용, 동작을 나누세요.
열기와 닫기: open으로 열고 closable·maskClosable로 닫기 동작을 정합니다.

예제

상세 패널

오른쪽에서 항목의 상세 내용을 확인합니다.

코드 보기

HTML

<sy-button id="open-drawer">상세 패널 열기</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="280"
  id="sample"
><strong slot="header">프로젝트 정보</strong>
  <div slot="body">
    <p>담당자 · Alex Kim</p>
    <p>진행 상태 · 검토 중</p>
  </div>
  <sy-button slot="footer" id="close-drawer">확인</sy-button>
</sy-drawer>

<script type="module">
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
</script>

왼쪽 패널

왼쪽에서 보조 탐색 영역을 엽니다.

코드 보기

HTML

<sy-button id="open-drawer">상세 패널 열기</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="280"
  position="left"
  id="sample"
><strong slot="header">프로젝트 정보</strong>
  <div slot="body">
    <p>담당자 · Alex Kim</p>
    <p>진행 상태 · 검토 중</p>
  </div>
  <sy-button slot="footer" id="close-drawer">확인</sy-button>
</sy-drawer>

<script type="module">
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
</script>

아래쪽 패널

아래쪽에 보조 내용을 배치합니다.

코드 보기

HTML

<sy-button id="open-drawer">상세 패널 열기</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="240"
  position="bottom"
  id="sample"
><strong slot="header">프로젝트 정보</strong>
  <div slot="body">
    <p>담당자 · Alex Kim</p>
    <p>진행 상태 · 검토 중</p>
  </div>
  <sy-button slot="footer" id="close-drawer">확인</sy-button>
</sy-drawer>

<script type="module">
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
</script>

배경 유지

배경 마스크 없이 패널을 표시합니다.

코드 보기

HTML

<sy-button id="open-drawer">상세 패널 열기</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="280"
  maskless
  id="sample"
><strong slot="header">프로젝트 정보</strong>
  <div slot="body">
    <p>담당자 · Alex Kim</p>
    <p>진행 상태 · 검토 중</p>
  </div>
  <sy-button slot="footer" id="close-drawer">확인</sy-button>
</sy-drawer>

<script type="module">
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
</script>

등장과 퇴장

position에 맞는 slide 효과를 사용합니다.

코드 보기

HTML

<sy-button id="open-drawer">상세 패널 열기</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="280"
  animation="slide"
  id="sample"
><strong slot="header">프로젝트 정보</strong>
  <div slot="body">
    <p>담당자 · Alex Kim</p>
    <p>진행 상태 · 검토 중</p>
  </div>
  <sy-button slot="footer" id="close-drawer">확인</sy-button>
</sy-drawer>

<script type="module">
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
</script>

이벤트와 전달 값

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

코드 보기

HTML

<sy-button id="open-drawer">상세 패널 열기</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="280"
  position="right"
  mask-closable
  animation="none"
  id="sample"
><strong slot="header">프로젝트 정보</strong>
  <div slot="body">
    <p>담당자 · Alex Kim</p>
    <p>진행 상태 · 검토 중</p>
  </div>
  <sy-button slot="footer" id="close-drawer">확인</sy-button>
</sy-drawer>
<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;
  }) ?? '완료';
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
  for (const name of ["opened", "closed"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

이동 시 패널 닫기

closeOnNavigation은 뒤로·앞으로 이동으로 popstate가 발생할 때 열린 패널을 닫습니다. 앱이 이력을 이동하는 경우 패널 상태를 정리할 때 사용하세요.

코드 보기

HTML

<sy-button id="open-drawer">상세 패널 열기</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="280"
  position="right"
  mask-closable
  animation="none"
  close-on-navigation
  id="sample"
><strong slot="header">프로젝트 정보</strong>
  <div slot="body">
    <p>담당자 · Alex Kim</p>
    <p>진행 상태 · 검토 중</p>
  </div>
  <sy-button slot="footer" id="close-drawer">확인</sy-button>
</sy-drawer>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "closeOnNavigation": true
  });
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
</script>

상단 드로어

미리보기 위쪽에서 작은 드로어를 엽니다.

코드 보기

HTML

<sy-button id="open-drawer">상세 패널 열기</sy-button>
<sy-drawer
  closable
  size="custom"
  customsize="160"
  position="top"
  mask-closable
  animation="none"
  id="sample"
><strong slot="header">프로젝트 정보</strong>
  <div slot="body">
    <p>담당자 · Alex Kim</p>
    <p>진행 상태 · 검토 중</p>
  </div>
  <sy-button slot="footer" id="close-drawer">확인</sy-button>
</sy-drawer>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "position": "top",
    "size": "custom",
    "customSize": 160
  });
  await ((root) => {
    const panel = root.querySelector('#sample');
    root.querySelector('#open-drawer').addEventListener('click', () => panel.open = true);
    panel.querySelector('#close-drawer').addEventListener('click', () => panel.open = false);
  })(document);
</script>

기능별 예제

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

기능 찾기

사용 예제 · Overview

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

코드 보기

HTML

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