Dropdown

Menú conmutable para visualizar listas de enlaces y acciones.

Uso básico

Pase el ratón por el menú para desplegarlo y obtener más acciones.

El elemento activado se renderiza por el slot predeterminado, y la parte desplegable se renderiza por el slot con nombre dropdown. Por defecto, la lista desplegable se muestra cuando se pasa el ratón por encima del elemento desencadenante sin necesidad de hacer clic en él.

Placement

Support 6 placements.

Set placement property to make dropdown appear in different locations.

vue

<template>
  <div class="flex flex-wrap items-center gap-4">
    <el-dropdown placement="top-start">
      <el-button> topStart </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>The Action 1st</el-dropdown-item>
          <el-dropdown-item>The Action 2st</el-dropdown-item>
          <el-dropdown-item>The Action 3st</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown placement="top">
      <el-button> top </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>The Action 1st</el-dropdown-item>
          <el-dropdown-item>The Action 2st</el-dropdown-item>
          <el-dropdown-item>The Action 3st</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown placement="top-end">
      <el-button> topEnd </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>The Action 1st</el-dropdown-item>
          <el-dropdown-item>The Action 2st</el-dropdown-item>
          <el-dropdown-item>The Action 3st</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown placement="bottom-start">
      <el-button> bottomStart </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>The Action 1st</el-dropdown-item>
          <el-dropdown-item>The Action 2st</el-dropdown-item>
          <el-dropdown-item>The Action 3st</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown placement="bottom">
      <el-button> bottom </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>The Action 1st</el-dropdown-item>
          <el-dropdown-item>The Action 2st</el-dropdown-item>
          <el-dropdown-item>The Action 3st</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-dropdown placement="bottom-end">
      <el-button> bottomEnd </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>The Action 1st</el-dropdown-item>
          <el-dropdown-item>The Action 2st</el-dropdown-item>
          <el-dropdown-item>The Action 3st</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

Elemento de activación

Utilizando un botón para activar la lista desplegable.

Utilice split-button para dividir el elemento detonante en un grupo de botones, siendo el botón izquierdo un botón normal y el botón derecho el objetivo real de la detonación. Si desea insertar una línea de separación entre la posición tres y la posición cuatro, solo añada una clase divider al cuarto ítem.

Cómo detonar el evento

Haga clic en el elemento de activación o pase el cursor sobre él.

Use el atributo trigger. Por defecto, es hover.

hover to trigger

click to trigger

right click to trigger

vue

<template>
  <el-row class="block-col-2">
    <el-col :span="8">
      <span class="demonstration">hover to trigger</span>
      <el-dropdown>
        <span class="el-dropdown-link">
          Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
            <el-dropdown-item :icon="CirclePlusFilled">
              Action 2
            </el-dropdown-item>
            <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
            <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
            <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
    <el-col :span="8">
      <span class="demonstration">click to trigger</span>
      <el-dropdown trigger="click">
        <span class="el-dropdown-link">
          Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
            <el-dropdown-item :icon="CirclePlusFilled">
              Action 2
            </el-dropdown-item>
            <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
            <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
            <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
    <el-col :span="8">
      <span class="demonstration">right click to trigger</span>
      <el-dropdown trigger="contextmenu">
        <span class="el-dropdown-link">
          Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
            <el-dropdown-item :icon="CirclePlusFilled">
              Action 2
            </el-dropdown-item>
            <el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
            <el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
            <el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import {
  ArrowDown,
  Check,
  CircleCheck,
  CirclePlus,
  CirclePlusFilled,
  Plus,
} from '@element-plus/icons-vue'
</script>

<style scoped>
.block-col-2 .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.block-col-2 .el-dropdown-link {
  display: flex;
  align-items: center;
}
</style>

Use hide-on-click para definir si el menú se cierra al hacer clic.

El menú predeterminado se cerrará cuando haga clic en los elementos del menú, y se puede desactivar configurando hide-on-click como false.

Evento de comando

Al hacer clic en cada elemento desplegable se detona un evento cuyo parámetro es asignado por cada ítem.

Métodos desplegables

Puede abrir o cerrar el menú desplegable usando manualmente handleOpen o handleClose

open(close) the Dropdown list2 will close(open) the Dropdown List1.

Tamaños

Además del tamaño predeterminado, el componente Dropdown proporciona tres tamaños adicionales para que pueda elegir entre diferentes escenarios.

Use attribute size to set additional sizes with large, default or small.

Nombre	Descripción	Tipo	Default
type	tipo de botón de menú, consulte el componente `Button`, solo funciona cuando `split-button` es true	`enum`	''
size	tamaño del menú, también funciona en split button	`enum`	''
max-height	la altura máxima del menú	`string` / `number`	''
split-button	si se visualiza un grupo de botones	`boolean`	false
disabled	whether to disable	`boolean`	false
placement	posición del menú	`enum`	bottom
trigger	cómo activar	`enum`	hover
hide-on-click	si se oculta el menú después de hacer clic en el elemento	`boolean`	true
show-timeout	delay time before show a dropdown (only works when trigger is `hover`)	`number`	150
hide-timeout	delay time before hide a dropdown (only works when trigger is `hover`)	`number`	150
role	the ARIA role attribute for the dropdown menu. Dependiendo del caso de uso, puede cambiar esto a 'navigation'	`string`	menu
tabindex	tabindex de Dropdown	`number` / `string`	0
popper-class	nombre de clase personalizado para la lista desplegable de Dropdown	`string`	''
popper-options	parámetros de popper.js	`object`	`{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}`
teleported 2.2.20	si la ventana emergente se teletransporta al cuerpo	`boolean`	true

Nombre	Descripción	Subtags
default	contenido del Dropdown. Aviso: Debe ser un elemento Html Dom válido (ej. `<span>, <button> etc.`) o `el-component`, para adjuntar al listener trigger	—
dropdown	contenido del menu Dropdown, normalmente es un elemento `<el-dropdown-menu>`	Dropdown-Menu

Nombre	Descripción	Tipo
click	si `split-button` es `true`, se activa al hacer clic con el botón izquierdo	`Function`
command	triggers when a dropdown item is clicked, the parameters is the command dispatched from the dropdown item	`Function`
visible-change	triggers when the dropdown appears/disappears, the param is true when it appears, and false otherwise	`Function`

Método	Descripción	Type
handleOpen	abre el menú desplegable	`Function`
handleClose	cierra el menú desplegable	`Function`

Nombre	Descripción	Subtags
default	contenido del Menú desplegable	Dropdown-Item

Nombre	Descripción	Type	Por defecto
command	un comando para ser enviado a la función de callback `command` de los Dropdown	`string` / `number` / `object`	—
disabled	si el elemento está desactivado	`boolean`	false
divided	si se visualiza un divisor	`boolean`	false
icon	icono personalizado	`string` / `Component`	—