Dropdown

Il componente Dropdown mostra il contenuto in un menu a comparsa. Si usa spesso insieme a Menu.

Utilizzo

Importa il componente:

import 'mdui/components/dropdown.js';

Importa il tipo TypeScript:

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

Esempio:

Apri il menu

Elemento 1

Elemento 2

<mdui-dropdown>
  <mdui-button slot="trigger">Apri il menu</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Elemento 1</mdui-menu-item>
    <mdui-menu-item>Elemento 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Esempi

Stato Disabilitato

Aggiungi l'attributo disabled per disabilitare il dropdown.

Apri il menu

Elemento 1

Elemento 2

<mdui-dropdown disabled>
  <mdui-button slot="trigger">Apri il menu</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Elemento 1</mdui-menu-item>
    <mdui-menu-item>Elemento 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Sorgente

Posizione di apertura

Usa l'attributo placement per controllare la posizione del menu a discesa.

Apri il menu

Elemento 1

Elemento 2

<mdui-dropdown placement="right-start">
  <mdui-button slot="trigger">Apri il menu</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Elemento 1</mdui-menu-item>
    <mdui-menu-item>Elemento 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Sorgente

Attivazione

Usa l'attributo trigger per scegliere come si attiva il menu a discesa.

Apri il menu

Elemento 1

Elemento 2

<mdui-dropdown trigger="hover">
  <mdui-button slot="trigger">Apri il menu</mdui-button>
  <mdui-menu>
    <mdui-menu-item>Elemento 1</mdui-menu-item>
    <mdui-menu-item>Elemento 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Sorgente

Apri nel punto del puntatore

Aggiungi l'attributo open-on-pointer per aprire il dropdown nella posizione del puntatore. Questo viene spesso combinato con trigger="contextmenu" per l'attivazione del menu con il tasto destro.

Apri il menu qui con il tasto destro del mouse

Elemento 1

Elemento 2

<mdui-dropdown trigger="contextmenu" open-on-pointer>
  <mdui-card slot="trigger" style="width:100%;height: 80px">Apri il menu qui con il tasto destro del mouse</mdui-card>
  <mdui-menu>
    <mdui-menu-item>Elemento 1</mdui-menu-item>
    <mdui-menu-item>Elemento 2</mdui-menu-item>
  </mdui-menu>
</mdui-dropdown>

Sorgente

Mantieni il menu aperto

Per impostazione predefinita, il dropdown si chiude quando fai clic su una voce di menu. Aggiungi stay-open-on-click per mantenerlo aperto.

Apri il menu

Elemento 1

Elemento 2

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

Sorgente

Ritardo di apertura/chiusura

Con trigger="hover", usa open-delay e close-delay per impostare i ritardi di apertura e chiusura.

Apri il menu

Elemento 1

Elemento 2

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

Sorgente

API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`open`	`open`	`boolean`	`false`
Se il dropdown deve aprirsi
`disabled`	`disabled`	`boolean`	`false`
Se il dropdown deve essere disabilitato
`trigger`	`trigger`	`'click' \| 'hover' \| 'focus' \| 'contextmenu' \| 'manual' \| string`	`'click'`
Modalità di apertura del dropdown. Supporta più valori separati da spazi. I valori opzionali includono: `click`: apre al clic `hover`: apre al passaggio del mouse `focus`: apre al focus `contextmenu`: apre al clic con il tasto destro del mouse o alla pressione prolungata sul tocco `manual`: può essere aperto e chiuso solo via codice; non è possibile specificare altre modalità di apertura
`placement`	`placement`	`'auto' \| 'top-start' \| 'top' \| 'top-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| 'right-start' \| 'right' \| 'right-end'`	`'auto'`
Posizione del contenuto del dropdown. I valori opzionali includono: `auto`: determina automaticamente la posizione `top-start`: in alto a sinistra `top`: in alto al centro `top-end`: in alto a destra `bottom-start`: in basso a sinistra `bottom`: in basso al centro `bottom-end`: in basso a destra `left-start`: a sinistra in alto `left`: a sinistra al centro `left-end`: a sinistra in basso `right-start`: a destra in alto `right`: a destra al centro `right-end`: a destra in basso
`stay-open-on-click`	`stayOpenOnClick`	`boolean`	`false`
Dopo il clic su `<mdui-menu-item>`, indica se il dropdown rimane aperto.
`open-delay`	`openDelay`	`number`	`150`
Ritardo per l'apertura del dropdown attivato dal passaggio del mouse, in millisecondi
`close-delay`	`closeDelay`	`number`	`150`
Ritardo per la chiusura del dropdown attivato dal passaggio del mouse, in millisecondi
`open-on-pointer`	`openOnPointer`	`boolean`	`false`
Indica se aprire il dropdown nella posizione del puntatore quando viene attivato; è utile soprattutto per aprire il menu contestuale con il tasto destro.

Eventi

Nome
`open`
L'evento viene attivato all'inizio dell'apertura del componente dropdown. È possibile impedire l'apertura del dropdown chiamando `event.preventDefault()`.
`opened`
L'evento viene attivato al termine dell'animazione di apertura del dropdown.
`close`
L'evento viene attivato all'inizio della chiusura del componente dropdown. È possibile impedire la chiusura del dropdown chiamando `event.preventDefault()`.
`closed`
L'evento viene attivato al termine dell'animazione di chiusura del dropdown.

Slots

Nome
(predefinito)
Contenuto del componente dropdown
`trigger`
Elemento che attiva il dropdown, ad esempio un elemento `<mdui-button>`.

CSS Parts

Nome
`trigger`
Contenitore dell'elemento che attiva il dropdown, cioè il contenitore dello slot `trigger`.
`panel`
Contenitore del contenuto del dropdown

CSS Custom Property

Nome
`--z-index`
Valore CSS `z-index` del componente

Capitolo precedente

Divider

Capitolo successivo

Fab