API di Select · Needless UI

Import

import-select.ts

import { type NuiOption, NuiSelect } from '@needless-ui/angular/select';

Un pulsante che apre un elenco di opzioni.

NuiSelect: Proprietà
Nome	Tipo	Predefinito	Descrizione
`options`Input	`NuiOption<V>[]`		Le opzioni, come oggetti `NuiOption`.
`value`Bidirezionale	`V \| null`	`null`	Il valore scelto, o `null`. Funziona anche con i moduli.
`values`Bidirezionale	`readonly V[]`	`[]`	I valori scelti, con `multiple`.
`multiple`Input	`boolean`	`false`	Permette di scegliere più opzioni. L’elenco resta aperto mentre scegli.
`selectAll`Input	`boolean`	`false`	Con `multiple`, aggiunge un pulsante che seleziona o deseleziona tutte le opzioni.
`placeholder`Input	`string`	`'Select…'`	Testo mostrato finché non si sceglie nulla.
`label`Input	`string`		Nome accessibile, quando nessun `<label>` dà un nome al pulsante.
`triggerId`Input	`string`		Id del pulsante, per `<label for>`.
`disabled`Input	`boolean`	`false`	Disattiva la select.
`compareWith`Input	`(a: V, b: V) => boolean`	`Object.is`	Indica se due valori sono la stessa opzione, per i valori che sono oggetti.
`virtual`Input	`boolean \| 'auto'`	`'auto'`	Renderizza solo le righe visibili: sempre, mai, o `auto` oltre 200 righe.
`openChange`Output	`boolean`		Emette quando l’elenco si apre o si chiude.
`show`Metodo	`() => void`		Apre l’elenco.
`hide`Metodo	`() => void`		Chiude l’elenco.
`focus`Metodo	`(options?: FocusOptions) => void`		Sposta il focus sul pulsante.

Anche ogni testo che mostra o annuncia è un input, così puoi tradurlo: selectAllLabel clearAllLabel emptyLabel

Un’opzione. La usano la select, la combobox e la palette dei comandi.

NuiOption: Proprietà
Nome	Tipo	Descrizione
`value`Proprietà	`V`	Il valore impostato quando la si sceglie. Di qualsiasi tipo.
`label`Proprietà	`string`	Il testo mostrato e cercato.
`description`Proprietà	`string`	Testo secondario sotto l’etichetta.
`group`Proprietà	`string`	Le opzioni con lo stesso gruppo sono elencate in ordine sotto quell’intestazione.
`keywords`Proprietà	`string[]`	Altre parole che la ricerca trova, come sinonimi o codici.
`disabled`Proprietà	`boolean`	Visibile, ma non si può scegliere.
`children`Proprietà	`NuiOption<V>[]`	Opzioni di un livello più in basso, che trasformano l’elenco in un albero.

Mettilo su un ng-template dentro il componente per disegnare tu ogni riga. Il contesto contiene l’opzione e la sua riga.

Disegna l’etichetta di un’opzione con le lettere trovate evidenziate, la sua descrizione e il suo percorso, per le tue righe.

NuiOptionText: Proprietà
Nome	Tipo	Predefinito	Descrizione
`nuiOptionText`Input	`NuiOptionRow<V>`		La riga, dal contesto del template.