Select

Il componente Select mostra le opzioni in un menu a discesa.

Questa guida si concentra sull'uso del componente <mdui-select>. Per informazioni sulle voci del menu a discesa, consulta la sezione <mdui-menu-item>.

Utilizzo

Importa i componenti:

import 'mdui/components/select.js';
import 'mdui/components/menu-item.js';

Importa i tipi TypeScript:

import type { Select } from 'mdui/components/select.js';
import type { MenuItem } from 'mdui/components/menu-item.js';

Esempio:

Elemento 1

Elemento 2

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
</mdui-select>

Esempi

Selezione Multipla

Per impostazione predefinita, il componente è a selezione singola. Il value del componente <mdui-select> corrisponde al value del <mdui-menu-item> attualmente selezionato.

Per abilitare la selezione multipla, aggiungi l'attributo multiple. In questo caso, il value di <mdui-select> diventa un array contenente le proprietà value dei componenti <mdui-menu-item> attualmente selezionati.

Nota: Quando la selezione multipla è abilitata, il value di <mdui-select> è un array. Puoi solo leggerlo e impostarlo tramite proprietà JavaScript.

Elemento 1

Elemento 2

Elemento 3

<mdui-select multiple class="example-multiple">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
  <mdui-menu-item value="item-3">Elemento 3</mdui-menu-item>
</mdui-select>

<script>
  // Imposta la selezione predefinita su item-1 e item-2
  const select = document.querySelector(".example-multiple");
  select.value = ["item-1", "item-2"];
</script>

Sorgente

Testo di Supporto

Usa l'attributo label per visualizzare il testo dell'etichetta sopra il select.

Elemento 1

Elemento 2

<mdui-select label="Campo di testo" value="item-1">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
</mdui-select>

Sorgente

Usa l'attributo placeholder per visualizzare il testo del segnaposto quando non viene selezionato alcun valore.

Elemento 1

Elemento 2

<mdui-select placeholder="Segnaposto">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
</mdui-select>

Sorgente

Usa l'attributo helper per visualizzare il testo di supporto nella parte inferiore del select. Oppure, usa lo slot helper per fornire il testo di supporto.

Elemento 1

Elemento 2

Elemento 1

Elemento 2

Testo di supporto

<mdui-select helper="Testo di supporto">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
</mdui-select>

<mdui-select>
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
  <span slot="helper" style="color: blue">Testo di supporto</span>
</mdui-select>

Sorgente

Stato Solo Lettura

Per rendere il select di sola lettura, aggiungi l'attributo readonly.

Elemento 1

Elemento 2

<mdui-select readonly value="item-1">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
</mdui-select>

Sorgente

Stato Disabilitato

Per disabilitare il select, aggiungi l'attributo disabled.

Elemento 1

Elemento 2

<mdui-select disabled value="item-1">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
</mdui-select>

Sorgente

Cancellabile

L'attributo clearable aggiunge un pulsante di cancellazione a destra quando il select ha un valore.

Elemento 1

Elemento 2

<mdui-select clearable value="item-1">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
</mdui-select>

Sorgente

Puoi personalizzare il pulsante di cancellazione utilizzando lo slot clear.

Elemento 1

Elemento 2

<mdui-select clearable value="item-1">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
  <mdui-icon slot="clear" name="delete"></mdui-icon>
</mdui-select>

Sorgente

Posizione del Menu a Discesa

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

Elemento 1

Elemento 2

<mdui-select placement="top" value="item-1">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
</mdui-select>

Sorgente

Allineamento del Testo

Per allineare il testo a destra, aggiungi l'attributo end-aligned.

Elemento 1

Elemento 2

<mdui-select end-aligned value="item-1">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
</mdui-select>

Sorgente

Prefisso, Suffisso e Icone

Usa gli attributi icon e end-icon per aggiungere Icone Material a sinistra e a destra del select. Oppure, usa gli slot icon e end-icon per aggiungere elementi al select.

Elemento 1

Elemento 2

Elemento 1

Elemento 2

<mdui-select value="item-1" icon="search" end-icon="mic">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
</mdui-select>

<br/><br/>

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
  <mdui-button-icon slot="icon" icon="search"></mdui-button-icon>
  <mdui-button-icon slot="end-icon" icon="mic"></mdui-button-icon>
</mdui-select>

Sorgente

Usa gli attributi prefix e suffix per aggiungere testo a sinistra e a destra del select. Oppure, usa gli slot prefix e suffix per aggiungere elementi di testo. Questo testo appare quando il select è focalizzato o ha un valore.

Elemento 1

Elemento 2

Elemento 1

Elemento 2

$ /100

<mdui-select value="item-1" prefix="$" suffix="/100">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
</mdui-select>

<br/><br/>

<mdui-select value="item-1">
  <mdui-menu-item value="item-1">Elemento 1</mdui-menu-item>
  <mdui-menu-item value="item-2">Elemento 2</mdui-menu-item>
  <span slot="prefix" style="color: blue">$</span>
  <span slot="suffix" style="color: blue">/100</span>
</mdui-select>

Sorgente

API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`variant`	`variant`	`'filled' \| 'outlined'`	`'filled'`
Stile del componente Select. I valori opzionali includono: `filled`: componente Select con colore di sfondo, effetto visivo più forte `outlined`: componente Select con bordo, effetto visivo più debole
`multiple`	`multiple`	`boolean`	`false`
Se supportare la selezione multipla
`name`	`name`	`string`	`''`
Nome del componente Select, verrà inviato insieme ai dati del modulo
`value`	`value`	`string \| string[]`	`''`
Valore del componente Select, verrà inviato insieme ai dati del modulo. Se l'attributo `multiple` non è specificato, questo valore è una stringa; se l'attributo `multiple` è specificato, questo valore è un array di stringhe. L'attributo HTML può impostare solo valori stringa; se è necessario impostare un valore array, impostarlo tramite la proprietà JavaScript.
	`defaultValue`	`string \| string[]`	`''`
Valore selezionato predefinito. Quando si reimposta il modulo, verrà ripristinato a questo valore predefinito. Questa proprietà può essere impostata solo tramite JavaScript.
`label`	`label`	`string`	-
Testo dell'etichetta
`placeholder`	`placeholder`	`string`	-
Testo del segnaposto
`helper`	`helper`	`string`	-
Testo di aiuto nella parte inferiore del componente Select. Può anche essere impostato tramite `slot="helper"`.
`clearable`	`clearable`	`boolean`	`false`
Se è possibile svuotare il componente Select
`clear-icon`	`clearIcon`	`string`	-
Nome dell'icona Material per il pulsante di cancellazione visualizzato a destra del componente Select quando è cancellabile. Può anche essere impostato tramite `slot="clear-icon"`.
`placement`	`placement`	`'auto' \| 'bottom' \| 'top'`	`'auto'`
Posizione del componente Select. I valori opzionali includono: `auto`: determina automaticamente la posizione `bottom`: in basso `top`: in alto
`end-aligned`	`endAligned`	`boolean`	`false`
Se il testo è allineato a destra
`prefix`	`prefix`	`string`	-
Testo del prefisso del componente Select. Viene visualizzato solo quando il componente riceve il focus o quando ha un valore. Può anche essere impostato tramite `slot="prefix"`.
`suffix`	`suffix`	`string`	-
Testo del suffisso del componente Select. Viene visualizzato solo quando il componente riceve il focus o quando ha un valore. Può anche essere impostato tramite `slot="suffix"`.
`icon`	`icon`	`string`	-
Nome dell'icona Material per l'icona del prefisso del componente Select. Può anche essere impostato tramite `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nome dell'icona Material per l'icona del suffisso del componente Select. Può anche essere impostato tramite `slot="end-icon"`.
`error-icon`	`errorIcon`	`string`	-
Nome dell'icona Material visualizzata a destra del componente Select quando la convalida del campo del modulo fallisce. Può anche essere impostato tramite `slot="error-icon"`.
`form`	`form`	`string`	-
Elemento `<form>` associato. Il valore di questo attributo deve essere l'`id` di un elemento `<form>` nella stessa pagina. Se questo attributo non è specificato, l'elemento deve essere un elemento figlio dell'elemento `<form>`. Con questo attributo, puoi posizionare l'elemento in qualsiasi punto della pagina, non solo come figlio dell'elemento `<form>`.
`readonly`	`readonly`	`boolean`	`false`
Se è di sola lettura
`disabled`	`disabled`	`boolean`	`false`
Se il componente è disabilitato
`required`	`required`	`boolean`	`false`
Se è obbligatorio compilare questo campo al momento dell'invio del modulo
	`validity`	`ValidityState`	-
Oggetto dello stato di convalida del modulo, per i dettagli fare riferimento a `ValidityState`
	`validationMessage`	`string`	-
Se la convalida del modulo non viene superata, questo attributo conterrà un messaggio informativo. Se la convalida viene superata, questo attributo sarà una stringa vuota
`autofocus`	`autofocus`	`boolean`	`false`
Se deve ricevere automaticamente il focus al caricamento della pagina
`tabindex`	`tabIndex`	`number`	-
Ordine di tabulazione dell'elemento

Metodi

Nome	Parametri	Restituisce
`checkValidity`		`boolean`
Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce `false` e attiva l'evento `invalid`; in caso affermativo, restituisce `true`
`reportValidity`		`boolean`
Verifica se il campo del modulo supera la convalida. In caso contrario, restituisce `false` e attiva l'evento `invalid`; in caso affermativo, restituisce `true`. Se la convalida non viene superata, viene visualizzato un messaggio di errore sul componente.
`setCustomValidity`	`message: string`	`void`
Imposta un messaggio di errore personalizzato. Finché questo testo non è vuoto, significa che il campo non ha superato la convalida
`click`		`void`
Simula un clic del mouse sull'elemento
`focus`	`options: FocusOptions` (Opzionale)	`void`
Imposta il focus sull'elemento corrente. È possibile passare un oggetto come parametro, le cui proprietà includono: `preventScroll`: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su `true`.
`blur`		`void`
Rimuove il focus dall'elemento corrente

Eventi

Nome
`focus`
Attivato quando si riceve il focus
`blur`
Attivato quando si perde il focus
`change`
Attivato quando il valore selezionato cambia
`invalid`
Attivato quando la convalida del campo del modulo non viene superata
`clear`
Attivato quando si fa clic sul pulsante di cancellazione generato dall'attributo `clearable`. È possibile impedire la cancellazione del componente Select chiamando `event.preventDefault()`.

Slots

Nome
(predefinito)
Elemento `<mdui-menu-item>`
`icon`
Icona a sinistra
`end-icon`
Icona a destra
`error-icon`
Icona a destra nello stato di errore di convalida
`prefix`
Testo a sinistra
`suffix`
Testo a destra
`clear-button`
Pulsante di cancellazione
`clear-icon`
Icona nel pulsante di cancellazione
`helper`
Testo di aiuto in basso

CSS Parts

Nome
`chips`
In caso di selezione multipla, contenitore per i chip corrispondenti ai valori selezionati.
`chip`
In caso di selezione multipla, chip per ogni valore selezionato.
`chip__button`
Elemento `<button>` all'interno del chip
`chip__label`
Testo all'interno del chip
`chip__delete-icon`
Icona di eliminazione all'interno del chip
`text-field`
Campo di testo, cioè l'elemento `<mdui-text-field>`.
`text-field__container`
Contenitore del campo di testo all'interno di text-field.
`text-field__icon`
Icona a sinistra all'interno di text-field.
`text-field__end-icon`
Icona a destra all'interno di text-field.
`text-field__error-icon`
Icona a destra per lo stato di errore di convalida all'interno di text-field.
`text-field__prefix`
Testo a sinistra all'interno di text-field.
`text-field__suffix`
Testo a destra all'interno di text-field.
`text-field__label`
Testo dell'etichetta all'interno di text-field.
`text-field__input`
Elemento `<input>` all'interno di text-field.
`text-field__clear-button`
Pulsante di cancellazione all'interno di text-field.
`text-field__clear-icon`
Icona nel pulsante di cancellazione all'interno di text-field.
`text-field__supporting`
Contenitore delle informazioni di supporto nella parte inferiore di text-field, inclusi helper ed error.
`text-field__helper`
Testo di aiuto nella parte inferiore all'interno di text-field.
`text-field__error`
Testo di descrizione dell'errore nella parte inferiore all'interno di text-field.
`menu`
Menu a discesa, cioè l'elemento `<mdui-menu>`.

Capitolo precedente

RangeSlider

Capitolo successivo

SegmentedButton