Needless UI

Componenti

Combobox

Un campo di testo che suggerisce opzioni mentre scrivi.

Import

import-combobox.ts
import { NuiCombobox, type NuiOption } from '@needless-ui/angular/select';

NuiCombobox

Un campo di testo che suggerisce opzioni mentre scrivi.

Selettore
nui-combobox
NomeTipoPredefinitoDescrizione
optionsInputNuiOption<V>[]Le opzioni, come oggetti NuiOption.
valueBidirezionaleV | nullnullIl valore scelto, o null. Funziona anche con i moduli.
valuesBidirezionalereadonly V[][]I valori scelti, con multiple.
multipleInputbooleanfalsePermette di scegliere più opzioni, mostrate come chip.
createInput(text: string) => VCrea un valore dal testo digitato. L’elenco propone allora di aggiungere il testo che non è un’opzione.
filteringInputbooleantrueFiltra le opzioni mentre scrivi. Disattivalo quando le filtra un server.
loadingInputbooleanfalseMostra una riga di caricamento mentre i risultati sono in arrivo.
clearableInputbooleanfalseAggiunge un pulsante che cancella il valore, e permette di cancellarlo con Esc.
placeholderInputstring''Testo mostrato mentre il campo è vuoto.
labelInputstringNome accessibile, quando nessun <label> dà un nome al campo.
inputIdInputstringId del campo di testo, per <label for>.
disabledInputbooleanfalseDisattiva il campo.
compareWithInput(a: V, b: V) => booleanObject.isIndica se due valori sono la stessa opzione, per i valori che sono oggetti.
displayWithInput(value: V) => stringStringTesto per un valore che non è tra le opzioni, come uno impostato prima che si carichino.
virtualInputboolean | 'auto''auto'Renderizza solo le righe visibili: sempre, mai, o auto oltre 200 righe.
queryChangeOutputstringEmette il testo mentre viene digitato, per una ricerca sul server.
openChangeOutputbooleanEmette quando l’elenco si apre o si chiude.
showMetodo() => voidApre l’elenco.
hideMetodo() => voidChiude l’elenco.
clearMetodo() => voidCancella il valore e il testo.
focusMetodo(options?: FocusOptions) => voidSposta il focus sul campo di testo.

Anche ogni testo che mostra o annuncia è un input, così puoi tradurlo: emptyLabel loadingLabel clearLabel toggleLabel chipsLabel removeLabel createLabel

NuiOptionTemplate

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

Selettore
ng-template[nuiOptionTemplate]

NuiOptionText

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

Selettore
[nuiOptionText]
NomeTipoPredefinitoDescrizione
nuiOptionTextInputNuiOptionRow<V>La riga, dal contesto del template.