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

열기 버튼 구성
title 슬롯에 사용자가 누를 트리거를 넣습니다.
명령 목록 배치
기본 슬롯에 sy-menu와 항목을 구성하세요.
선택한 명령 실행
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>

기능별 예제

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

기능 찾기

사용 예제 · Overview

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

코드 보기

HTML

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

사용 예제 · 작은 작업 메뉴

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

코드 보기

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

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

Events

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

Slots

Slot	Description
	title 영역에 표시할 내용입니다.
	컴포넌트의 본문 또는 자식 항목입니다.

Dropdown

사용 가이드

열기 버튼 구성

명령 목록 배치

선택한 명령 실행

예제

작업 선택

간결한 트리거

오른쪽 정렬

사용할 수 없는 작업

포인터로 열기

이벤트와 전달 값

트리거 도움말

작은 작업 메뉴

기능별 예제

사용 예제 · Overview

속성 · Borderless

속성 · Disabled

속성 · Position

속성 · Size

속성 · Trigger

이벤트 · Selected

사용 예제 · 작은 작업 메뉴

API reference

<sy-dropdown>

Properties

Events

Slots

`<sy-dropdown>`