Dropdown

Menú conmutable para visualizar listas de enlaces y acciones.

TIP

Este componente requiere el envoltorio <client-only></client-only> cuando se utiliza en SSR (por ejemplo: Nuxt) y SSG (por ejemplo: VitePress).

Uso básico

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

Utilizando un botón para activar la lista desplegable.

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

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

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

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

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

Nombre	Descripción	Tipo	Valores Aceptados	Por defecto
type	tipo de botón de menú, consulte el componente `Button`, solo funciona cuando `split-button` es true	string	—	—
size	tamaño del menú, también funciona en split button	string	large / default / small	default
max-height	la altura máxima del menú	string / number	—	—
split-button	si se visualiza un grupo de botones	boolean	—	false
disabled	Deshabilitar o no	boolean	—	false
placement	posición del menú	string	top/top-start/top-end/bottom/bottom-start/bottom-end	bottom
trigger	cómo activar	string	hover/click/contextmenu	hover
hide-on-click	si se oculta el menú después de hacer clic en el elemento	boolean	—	true
show-timeout	Tiempo de retraso antes de mostrar un dropdown (solamente trabaja cuando se activa con `hover`)	number	—	150
hide-timeout	Tiempo de retraso antes de ocultar un dropdown (solamente trabaja cuando se activa con `hover`)	number	—	150
role	El atributo de rol ARIA para el menú desplegable. Dependiendo del caso de uso, puede cambiar esto a 'navigation'	string	—	'menu'
tabindex	tabindex de Dropdown	number	—	0
popper-class	nombre de clase personalizado para la lista desplegable de Dropdown	string	—	—
popper-options	parámetros de popper.js	Object	por favor, consulte popper.js	`{modifiers: [{name: 'computeStyles',options: {gpuAcceleration: false}}]}`
teleported 2.2.20	si la ventana emergente se teletransporta al cuerpo	boolean	—	true

Nombre	Descripción	Subtags
—	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	Parámetros
click	si `split-button` es `true`, se activa al hacer clic con el botón izquierdo	—
command	se dispara cuando se hace clic en un elemento del Dropdown	el comando enviado desde el elemento del Dropdown
visible-change	se dispara cuando aparece/desaparece el desplegable	true cuando aparece, y false de otro modo

Método	Descripción	Parámetros
handleOpen	abre el menú desplegable	—
handleClose	cierra el menú desplegable	—

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

Nombre	Descripción	Tipo	Valores aceptados	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`	—	—