syidaxdesign system
홈 가격 내 정보
ComponentsOverlays

Dropdown

하나의 트리거에서 관련된 작업 메뉴를 펼칩니다.

<sy-dropdown>설치 안내 기본 사용법
Live preview
컴포넌트를 조작하면 여기에 결과가 표시됩니다.
코드 보기
HTML
<div style="align-self:center;margin:40px 0">
  <sy-dropdown
    position="bottomLeft"
    trigger="click"
    size="medium"
  ><span slot="title">프로젝트 작업</span>
    <sy-menu>
      <sy-menu-item value="edit">편집</sy-menu-item>
      <sy-menu-item value="copy">복제</sy-menu-item>
      <sy-menu-item value="archive" disabled>보관</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>

사용 가이드

#

버튼 뒤에 보조 명령 목록을 모을 때 사용합니다. 폼에서 값을 고르는 용도에는 Select가 알맞습니다.

  1. 열기 버튼 구성

    title 슬롯에 사용자가 누를 트리거를 넣습니다.

  2. 명령 목록 배치

    기본 슬롯에 sy-menu와 항목을 구성하세요.

  3. 선택한 명령 실행

    selected 이벤트의 value를 읽어 해당 동작을 처리합니다. disabled로 실행을 막을 수 있습니다.

예제

#

작업 선택

편집 또는 복제를 선택하면 해당 value가 전달됩니다.

코드 보기
HTML
<div style="align-self:center;margin:40px 0">
  <sy-dropdown><span slot="title">프로젝트 작업</span>
    <sy-menu>
      <sy-menu-item value="edit">편집</sy-menu-item>
      <sy-menu-item value="copy">복제</sy-menu-item>
      <sy-menu-item value="archive" disabled>보관</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>

간결한 트리거

테두리 없이 메뉴 동작을 표시합니다.

코드 보기
HTML
<div style="align-self:center;margin:40px 0">
  <sy-dropdown borderless><span slot="title">프로젝트 작업</span>
    <sy-menu>
      <sy-menu-item value="edit">편집</sy-menu-item>
      <sy-menu-item value="copy">복제</sy-menu-item>
      <sy-menu-item value="archive" disabled>보관</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>

오른쪽 정렬

목록의 오른쪽 끝을 트리거에 맞춥니다.

코드 보기
HTML
<div style="align-self:center;margin:40px 0">
  <sy-dropdown position="bottomRight"><span slot="title">프로젝트 작업</span>
    <sy-menu>
      <sy-menu-item value="edit">편집</sy-menu-item>
      <sy-menu-item value="copy">복제</sy-menu-item>
      <sy-menu-item value="archive" disabled>보관</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>

사용할 수 없는 작업

권한이나 현재 상태 때문에 동작할 수 없을 때 비활성화합니다.

코드 보기
HTML
<div style="align-self:center;margin:40px 0">
  <sy-dropdown disabled><span slot="title">프로젝트 작업</span>
    <sy-menu>
      <sy-menu-item value="edit">편집</sy-menu-item>
      <sy-menu-item value="copy">복제</sy-menu-item>
      <sy-menu-item value="archive" disabled>보관</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>

포인터로 열기

포인터가 머무는 동안 목록을 표시합니다.

코드 보기
HTML
<div style="align-self:center;margin:40px 0">
  <sy-dropdown trigger="hover"><span slot="title">프로젝트 작업</span>
    <sy-menu>
      <sy-menu-item value="edit">편집</sy-menu-item>
      <sy-menu-item value="copy">복제</sy-menu-item>
      <sy-menu-item value="archive" disabled>보관</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>

이벤트와 전달 값

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

코드 보기
HTML
<div style="align-self:center;margin:40px 0">
  <sy-dropdown
    position="bottomLeft"
    trigger="click"
    size="medium"
  ><span slot="title">프로젝트 작업</span>
    <sy-menu>
      <sy-menu-item value="edit">편집</sy-menu-item>
      <sy-menu-item value="copy">복제</sy-menu-item>
      <sy-menu-item value="archive" disabled>보관</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>
<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 ["selected"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

트리거 도움말

tooltip에 메뉴 목적을 설명하면 트리거에 포인터를 올렸을 때 도움말이 표시됩니다.

코드 보기
HTML
<div style="align-self:center;margin:40px 0">
  <sy-dropdown
    position="bottomLeft"
    trigger="click"
    size="medium"
    tooltip="프로젝트 편집·복제 메뉴"
    id="supplement-1"
  ><span slot="title">프로젝트 작업</span>
    <sy-menu>
      <sy-menu-item value="edit">편집</sy-menu-item>
      <sy-menu-item value="copy">복제</sy-menu-item>
      <sy-menu-item value="archive" disabled>보관</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "tooltip": "프로젝트 편집·복제 메뉴"
  });
</script>

작은 작업 메뉴

작고 테두리 없는 버튼으로 작업 메뉴를 엽니다.

코드 보기
HTML
<div style="align-self:center;margin:40px 0">
  <sy-dropdown
    position="bottomLeft"
    trigger="click"
    size="small"
    borderless
    id="supplement-1"
  ><span slot="title">프로젝트 작업</span>
    <sy-menu>
      <sy-menu-item value="edit">편집</sy-menu-item>
      <sy-menu-item value="copy">복제</sy-menu-item>
      <sy-menu-item value="archive" disabled>보관</sy-menu-item>
    </sy-menu>
  </sy-dropdown>
</div>

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

API reference

#

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

<sy-dropdown>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalse기본 테두리를 숨깁니다.
booleanfalse사용자 조작과 키보드 포커스를 차단합니다.
'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight''bottomLeft'메뉴를 트리거에 맞추는 모서리입니다.
'small' | 'medium' | 'large''medium'컴포넌트의 크기입니다.
'hover' | 'click''click'목록 또는 팝업을 여는 사용자 동작입니다.
string''트리거의 보조 설명입니다.

Events

EventDetailDescription
CustomEvent<any>사용자가 항목을 선택했을 때 발생합니다.

Slots

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