Dropdown

Dropdown

출처: 문서

본문

링크와 액션 목록을 표시하는 토글 가능한 메뉴 컴포넌트예요. 메뉴를 펼쳐서 여러 동작을 선택하게 하고 싶을 때 사용해요.

기본 사용 (Basic usage)

드롭다운 메뉴에 마우스를 올리면 펼쳐져서 더 많은 액션을 보여줘요. 트리거 요소는 default 슬롯으로 렌더링되고, 드롭다운 부분은 dropdown이라는 이름의 슬롯으로 렌더링돼요. 기본적으로 트리거 요소에 마우스를 올리면(클릭하지 않아도) 드롭다운 목록이 표시돼요.

배치 (Placement)

6가지 배치를 지원해요. placement 속성을 설정하면 드롭다운이 다른 위치에 나타나도록 할 수 있어요.

배치 옵션: top, topStart, topEnd, bottomStart, bottom, bottomEnd 등이 있어요.

트리거 요소 (Triggering element)

버튼으로 드롭다운 목록을 트리거할 수 있어요. split-button을 사용해 트리거 요소를 버튼 그룹으로 나눌 수 있는데, 왼쪽 버튼은 일반 버튼이고 오른쪽 버튼이 실제 트리거 대상이 돼요. 세 번째와 네 번째 항목 사이에 구분선을 넣고 싶다면 네 번째 항목에 divided 속성을 추가하면 돼요.

<template>
  <div class="example-showcase">
    <el-dropdown>
      <el-button type="primary">
        Dropdown List <el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>Action 1</el-dropdown-item>
          <el-dropdown-item>Action 2</el-dropdown-item>
          <el-dropdown-item>Action 3</el-dropdown-item>
          <el-dropdown-item divided>Action 4</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'

const handleClick = () => {
  // eslint-disable-next-line no-alert
  alert('button click')
}
</script>

.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

트리거 방법 (How to trigger)

트리거 요소를 클릭하거나 그 위에 마우스를 올려서 트리거할 수 있어요. trigger 속성을 사용해요. 기본값은 hover예요. trigger를 click으로 바꾸면 클릭으로 트리거하고, contextmenu로 바꾸면 우클릭으로 트리거해요.

메뉴 숨김 동작 (Menu hiding behavior)

hide-on-click으로 메뉴가 클릭 시 닫힐지 정의할 수 있어요. 기본적으로 메뉴 항목을 클릭하면 메뉴가 닫혀요. hide-on-click을 false로 설정하면 끌 수 있어요.

커맨드 이벤트 (Command event)

각 드롭다운 항목을 클릭하면 이벤트가 발생하고, 그 파라미터는 각 항목에서 할당돼요. command 속성으로 지정한 값이 이벤트에 실려 전달돼요.

Dropdown 메서드 (Dropdown methods)

handleOpen이나 handleClose를 수동으로 호출해 드롭다운 메뉴를 열거나 닫을 수 있어요.

<template>
  <div class="example-showcase">
    <el-dropdown ref="dropdown1" @visible-change="handleVisible2">
      <span class="el-dropdown-link">
        show<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>Action 1</el-dropdown-item>
          <el-dropdown-item>Action 2</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import type { DropdownInstance } from 'element-plus'

const dropdown1 = ref()

function handleVisible2(visible: any) {
  if (!dropdown1.value) return
  if (visible) {
    dropdown1.value.handleClose()
  } else {
    dropdown1.value.handleOpen()
  }
}

function showClick() {
  if (!dropdown1.value) return
  dropdown1.value.handleOpen()
}
</script>

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

크기 (Sizes)

기본 크기 외에 Dropdown 컴포넌트는 서로 다른 시나리오를 위해 세 가지 추가 크기를 제공해요. size 속성을 사용해 large, default 또는 small 크기를 설정할 수 있어요.

가상 트리거링 (Virtual triggering) 2.11.3

때로는 드롭다운을 다른 트리거 요소에 렌더링하고 싶을 수 있어요. 그럴 때는 트리거와 내용을 분리할 수 있어요. virtual-triggering과 virtual-ref를 사용하면 됩니다.

Dropdown API

Dropdown Attributes

Dropdown Slots

Dropdown Events

Dropdown Exposes

Dropdown-Menu API

Dropdown-Menu Slots

Dropdown-Item API

Dropdown-Item Attributes

Dropdown-Item Slots

더 알아보기 (Learn more)