È disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.

Select

Il menu a discesa consente agli utenti di scegliere tra più opzioni.

Modalità d'uso

Chiamata tramite classi CSS
Chiamata tramite attributi personalizzati (se il componente viene generato dinamicamente, è necessario chiamare mdui.mutation() per l'inizializzazione)
Chiamata via JavaScript

Letture correlate

Linee guida di Material Design: Componenti - Menu a discesa

Stile

Componente select nativo a selezione singola

All'elemento <select> aggiungi la classe .mdui-select per conferirgli uno stile migliorato, senza dover chiamare JavaScript.

Esempio

<select class="mdui-select">
  <option value="1" selected>State 1</option>
  <option value="2">State 2</option>
  <option value="3">State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

Componente select nativo a selezione multipla

All'elemento <select multiple> è anche possibile aggiungere la classe .mdui-select per consentire la selezione multipla. Tuttavia, non tutti i browser visualizzano correttamente questo stile.

Esempio

<select multiple size="8" class="mdui-select">
  <optgroup label="Fonts">
    <option>Roboto</option>
    <option>Calibri</option>
    <option>Courier New</option>
    <option>Verdana</option>
  </optgroup>
  <optgroup label="Size">
    <option>50%</option>
    <option>75%</option>
    <option>90%</option>
    <option>100%</option>
  </optgroup>
  <optgroup label="header">
    <option>h1</option>
    <option>h2</option>
    <option>h3</option>
    <option>h4</option>
  </optgroup>
</select>

Modalità d'uso

Chiamata via attributi

Usando questo metodo non è necessario scrivere codice JavaScript. Basta aggiungere all'elemento <select> la classe .mdui-select e l'attributo mdui-select="options".

Se il componente è generato dinamicamente, è necessario chiamare mdui.mutation() per l'inizializzazione.

Esempio

<select class="mdui-select" mdui-select>
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

Esempio

<select class="mdui-select" mdui-select="{position: 'top'}">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

Esempio

<select class="mdui-select" mdui-select="{position: 'bottom'}">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

Chiamata via JavaScript

Istanziare il componente:

// selector è il selettore CSS, l'elemento DOM o la stringa HTML dell'elemento <select>
// options sono i parametri di configurazione, vedere l'elenco dei parametri di seguito
var inst = new mdui.Select(selector, options);

Esempio

<select class="mdui-select" id="demo-js">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

<script>
  var inst = new mdui.Select('#demo-js');
</script>

Parametro

Nome	Tipo	Predefinito	Descrizione
`position`	`string`	`auto`	Posizione del menu a discesa. Include `auto`, `top`, `bottom`
`gutter`	`int`	`16`	Distanza minima tra il menu a discesa e i bordi superiore e inferiore della finestra, in px. Questo parametro è valido solo quando `position` è `auto`.

Metodo

Nome metodo	Descrizione
`open()`	Apri il menu a discesa.
`close()`	Chiudi il menu a discesa.
`toggle()`	Commuta lo stato di apertura del menu a discesa.
`handleUpdate()`	Quando si modifica dinamicamente il contenuto dell'elemento `<select>`, è necessario chiamare questo metodo per rigenerare il menu a discesa.
`getState()`	Restituisce lo stato di apertura corrente del menu a discesa. Contiene quattro stati (`opening`, `opened`, `closing`, `closed`).

Evento

Nome evento	Descrizione	Target	Parametri
`open.mdui.select`	L'evento verrà attivato quando il menu a discesa inizia l'animazione di apertura.	`<select class="mdui-select"></select>`	`event._detail.inst`: Istanza
`opened.mdui.select`	L'evento verrà attivato quando il menu a discesa termina l'animazione di apertura.
`close.mdui.select`	L'evento verrà attivato quando il menu a discesa inizia l'animazione di chiusura.
`closed.mdui.select`	L'evento verrà attivato quando il menu a discesa termina l'animazione di chiusura.

Elenco classi CSS

Nome classe	Descrizione
`.mdui-select`	Definisce un componente Select.

Floating Action Button

Divider