DropdownDropdown

O Dropdown exibe conteúdo específico em um controle suspenso, geralmente usado com o componente de menu.

Como usar

Importe o componente quando necessário:

import 'mdui/components/dropdown.js';

Importe o tipo TypeScript do componente quando necessário:

import type { Dropdown } from 'mdui/components/dropdown.js';

Exemplo de uso:

open dropdown

Item 1

Item 2

<mdui-dropdown>
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Exemplos

Estado desabilitado

Use o atributo disabled para desabilitar o dropdown.

open dropdown

Item 1

Item 2

<mdui-dropdown disabled>
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Fonte

Posição de abertura

Use o atributo placement para definir a posição de abertura do dropdown.

open dropdown

Item 1

Item 2

<mdui-dropdown placement="right-start">
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Fonte

Modo de acionamento

Use o atributo trigger para definir o modo de acionamento do dropdown.

open dropdown

Item 1

Item 2

<mdui-dropdown trigger="hover">
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Fonte

Abrir na posição do cursor

Use o atributo open-on-pointer para abrir o dropdown na posição do cursor. Geralmente usado com trigger="contextmenu" para abrir o menu com o botão direito do mouse.

Clique com o botão direito nesta área para abrir o menu

Item 1

Item 2

<mdui-dropdown trigger="contextmenu" open-on-pointer>
  <mdui-card slot="trigger" style="width:100%;height: 80px">Clique com o botão direito nesta área para abrir o menu</mdui-card>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Fonte

Manter o menu aberto ao clicar

Ao usar o menu no dropdown, por padrão, clicar em um item do menu fecha o dropdown. Use o atributo stay-open-on-click para manter o dropdown aberto ao clicar em um item do menu.

open dropdown

Item 1

Item 2

<mdui-dropdown trigger="click" stay-open-on-click>
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Fonte

Atraso para abrir/fechar

Quando trigger="hover", você pode usar os atributos open-delay e close-delay para definir o atraso para abrir e fechar.

open dropdown

Item 1

Item 2

<mdui-dropdown trigger="hover" open-delay="1000" close-delay="1000">
  <mdui-button slot="trigger">open dropdown</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Item 1</mdui-menu-item>
    <mdui-menu-item>Item 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Fonte

API

Propriedades

Atributo	Propriedade	Tipo	Padrão
`open`	`open`	`boolean`	`false`
Define se o dropdown está aberto.
`disabled`	`disabled`	`boolean`	`false`
Define se o dropdown está desabilitado.
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'contextmenu' \| 'manual' \| string`	`'click'`
Forma de acionamento do dropdown. Suporta múltiplos valores separados por espaço. Os valores possíveis são: `click`: Aciona ao clicar. `hover`: Aciona ao passar o mouse. `focus`: Aciona ao receber foco. `contextmenu`: Aciona ao clicar com o botão direito do mouse ou toque longo. `manual`: Só pode ser aberto e fechado programaticamente. Não pode ser combinado com outras formas de acionamento.
`placement`	`placement`	`'auto' \| 'top-start' \| 'top' \| 'top-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'auto'`
Posição do conteúdo do dropdown. Os valores possíveis são: `auto`: Posição automática. `top-start`: Acima, alinhado à esquerda. `top`: Acima, centralizado. `top-end`: Acima, alinhado à direita. `bottom-start`: Abaixo, alinhado à esquerda. `bottom`: Abaixo, centralizado. `bottom-end`: Abaixo, alinhado à direita. `left-start`: À esquerda, alinhado ao topo. `left`: À esquerda, centralizado. `left-end`: À esquerda, alinhado à base. `right-start`: À direita, alinhado ao topo. `right`: À direita, centralizado. `right-end`: À direita, alinhado à base.
`stay-open-on-click`	`stayOpenOnClick`	`boolean`	`false`
Define se, após clicar em um `<mdui-menu-item>`, o dropdown deve permanecer aberto.
`open-delay`	`openDelay`	`number`	`150`
Atraso, em milissegundos, para abrir o dropdown ao passar o mouse.
`close-delay`	`closeDelay`	`number`	`150`
Atraso, em milissegundos, para fechar o dropdown ao passar o mouse.
`open-on-pointer`	`openOnPointer`	`boolean`	`false`
Define se o dropdown deve abrir na posição do cursor que o acionou. Usado frequentemente para abrir menus de contexto do mouse.

Eventos

Nome
`open`
Disparado quando o dropdown começa a abrir. Pode impedir a abertura chamando `event.preventDefault()`.
`opened`
Disparado quando a animação de abertura do dropdown é concluída.
`close`
Disparado quando o dropdown começa a fechar. Pode impedir o fechamento chamando `event.preventDefault()`.
`closed`
Disparado quando a animação de fechamento do dropdown é concluída.

Slots

Nome
(padrão)
Conteúdo do dropdown.
`trigger`
Elemento que aciona o dropdown, por exemplo, um elemento `<mdui-button>`.

CSS Parts

Nome
`trigger`
Contêiner do elemento que aciona o dropdown, ou seja, o contêiner do slot `trigger`.
`panel`
Contêiner do conteúdo do dropdown.

Propriedades CSS personalizadas

Nome
`--z-index`
Valor CSS `z-index` do componente.

Capítulo anterior

Divider Divisor

Próximo capítulo

Fab Botão de ação flutuante