syidaxdesign system
홈 가격 내 정보
ComponentsData display

Collapse

긴 설명을 주제별로 접어 필요한 내용부터 확인하게 합니다.

<sy-collapse>설치 안내 기본 사용법
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
HTML
<sy-collapse id="sample">
  <sy-collapse-panel active arrow><span slot="header">설치 방법</span>
    <p>패키지를 설치한 뒤 사용할 컴포넌트를 등록합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">테마 변경</span>
    <p>테마 클래스를 공통 컨테이너에 적용합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">업데이트</span>
    <p>릴리스 내용을 확인하고 버전을 갱신합니다.</p>
  </sy-collapse-panel>
</sy-collapse>

사용 가이드

#

FAQ·보조 설정처럼 필요할 때 펼쳐볼 내용에 사용합니다.

여러 내용을 비교

여러 패널을 함께 펼칠 수 있는 기본 방식을 사용하세요.

한 내용에 집중

accordion으로 한 번에 하나의 패널만 펼칩니다.

패널 구성
sy-collapse 안에 sy-collapse-panel을 배치하고 header 슬롯에 제목을 넣습니다. active로 초기 상태, arrow로 화살표 표시, disabled로 조작 가능 여부를 정합니다. openPanel()·closePanel()의 인덱스는 0부터 시작합니다.

예제

#

독립적인 패널

여러 패널을 동시에 펼칠 수 있습니다.

코드 보기
HTML
<sy-collapse id="sample">
  <sy-collapse-panel active arrow><span slot="header">설치 방법</span>
    <p>패키지를 설치한 뒤 사용할 컴포넌트를 등록합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">테마 변경</span>
    <p>테마 클래스를 공통 컨테이너에 적용합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">업데이트</span>
    <p>릴리스 내용을 확인하고 버전을 갱신합니다.</p>
  </sy-collapse-panel>
</sy-collapse>

아코디언

새 패널을 열면 기존 패널이 닫힙니다.

코드 보기
HTML
<sy-collapse accordion id="sample">
  <sy-collapse-panel active arrow><span slot="header">설치 방법</span>
    <p>패키지를 설치한 뒤 사용할 컴포넌트를 등록합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">테마 변경</span>
    <p>테마 클래스를 공통 컨테이너에 적용합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">업데이트</span>
    <p>릴리스 내용을 확인하고 버전을 갱신합니다.</p>
  </sy-collapse-panel>
</sy-collapse>

배경과 테두리

주변 콘텐츠에 자연스럽게 이어지는 스타일입니다.

코드 보기
HTML
<sy-collapse
  ghost
  borderless
  id="sample"
>
  <sy-collapse-panel active arrow><span slot="header">설치 방법</span>
    <p>패키지를 설치한 뒤 사용할 컴포넌트를 등록합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">테마 변경</span>
    <p>테마 클래스를 공통 컨테이너에 적용합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">업데이트</span>
    <p>릴리스 내용을 확인하고 버전을 갱신합니다.</p>
  </sy-collapse-panel>
</sy-collapse>

비활성 패널

일부 패널의 조작을 막을 수 있습니다.

코드 보기
HTML
<sy-collapse id="sample">
  <sy-collapse-panel
    active
    arrow
    disabled
  ><span slot="header">설치 방법</span>
    <p>패키지를 설치한 뒤 사용할 컴포넌트를 등록합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow disabled><span slot="header">테마 변경</span>
    <p>테마 클래스를 공통 컨테이너에 적용합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow disabled><span slot="header">업데이트</span>
    <p>릴리스 내용을 확인하고 버전을 갱신합니다.</p>
  </sy-collapse-panel>
</sy-collapse>

직접 제어

전체 또는 특정 패널을 열고 닫습니다.

코드 보기
HTML
<sy-collapse id="sample">
  <sy-collapse-panel active arrow><span slot="header">설치 방법</span>
    <p>패키지를 설치한 뒤 사용할 컴포넌트를 등록합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">테마 변경</span>
    <p>테마 클래스를 공통 컨테이너에 적용합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">업데이트</span>
    <p>릴리스 내용을 확인하고 버전을 갱신합니다.</p>
  </sy-collapse-panel>
</sy-collapse>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">모두 펼치기</sy-button>
  <sy-button id="action-1" size="small">모두 접기</sy-button>
  <sy-button id="action-2" size="small">두 번째 펼치기</sy-button>
</div>
<output id="demo-result" 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;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.openAll();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.closeAll();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#sample");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.openPanel(1);
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

이벤트와 전달 값

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

코드 보기
HTML
<sy-collapse id="sample">
  <sy-collapse-panel active arrow><span slot="header">설치 방법</span>
    <p>패키지를 설치한 뒤 사용할 컴포넌트를 등록합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">테마 변경</span>
    <p>테마 클래스를 공통 컨테이너에 적용합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">업데이트</span>
    <p>릴리스 내용을 확인하고 버전을 갱신합니다.</p>
  </sy-collapse-panel>
</sy-collapse>
<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 ["changed"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

개별 패널 제어

그룹 전체 대신 특정 sy-collapse-panel의 open·close·toggle을 호출합니다.

코드 보기
HTML
<sy-collapse id="sample">
  <sy-collapse-panel
    active
    arrow
    id="supplement-1"
  ><span slot="header">설치 방법</span>
    <p>패키지를 설치한 뒤 사용할 컴포넌트를 등록합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">테마 변경</span>
    <p>테마 클래스를 공통 컨테이너에 적용합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">업데이트</span>
    <p>릴리스 내용을 확인하고 버전을 갱신합니다.</p>
  </sy-collapse-panel>
</sy-collapse>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">첫 패널 펼치기</sy-button>
  <sy-button id="action-1" size="small">첫 패널 접기</sy-button>
  <sy-button id="action-2" size="small">첫 패널 전환</sy-button>
</div>
<output id="demo-result" 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;
  }) ?? '완료';
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {});
  const actionTarget0 = document.querySelector("#supplement-1");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.open();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#supplement-1");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.close();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#supplement-1");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.toggle();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

테두리 없는 패널

기본 패널 배경을 유지하면서 테두리를 제거합니다.

코드 보기
HTML
<sy-collapse borderless id="sample">
  <sy-collapse-panel active arrow><span slot="header">설치 방법</span>
    <p>패키지를 설치한 뒤 사용할 컴포넌트를 등록합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">테마 변경</span>
    <p>테마 클래스를 공통 컨테이너에 적용합니다.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">업데이트</span>
    <p>릴리스 내용을 확인하고 버전을 갱신합니다.</p>
  </sy-collapse-panel>
</sy-collapse>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "borderless": true,
    "ghost": false
  });
</script>

API reference

#

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

<sy-collapse>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalse한 번에 하나의 패널만 펼칩니다.
booleanfalse기본 테두리를 숨깁니다.
booleanfalse사용자 조작과 키보드 포커스를 차단합니다.
booleanfalse주어진 높이를 채우는 레이아웃을 사용합니다.
booleanfalse배경과 테두리를 최소화합니다.

Methods

MethodReturnsDescription
Promise<void>모든 패널을 펼칩니다. accordion에서는 한 패널만 유지합니다.
Promise<void>모든 패널을 접습니다.
Promise<void>지정한 인덱스의 패널을 펼칩니다.
Promise<void>지정한 인덱스의 패널을 접습니다.

Slots

SlotDescription
컴포넌트의 본문 또는 자식 항목입니다.

<sy-collapse-panel>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalse패널 본문을 펼칩니다.
booleanfalse펼침 화살표를 표시합니다.
booleanfalse사용자 조작과 키보드 포커스를 차단합니다.
booleanfalse배경과 테두리를 최소화합니다.
booleanfalse주어진 높이를 채웁니다.

Events

EventDetailDescription
CustomEvent<CollapsePanelChangeDetail>값 또는 선택 상태가 바뀔 때 발생합니다.

Methods

MethodReturnsDescription
Promise<void>현재 펼침 상태를 전환합니다.
Promise<void>파일 선택 창을 엽니다. 사용자 클릭 동작 안에서 호출하세요.
Promise<void>열린 패널을 닫습니다.

Slots

SlotDescription
header 영역에 표시할 내용입니다.
컴포넌트의 본문 또는 자식 항목입니다.
Design SystemTab 이동 Enter 열기