Combobox
Campo de selección con búsqueda y plantilla de opción personalizada.
Uso
Referencia de la API
VoltComboboxButton — volt-combobox-button
| Entrada | Tipo | Por defecto |
|---|---|---|
| id | string | `volt-combobox-button-${++nextComboboxButtonId}` |
VoltComboboxDropdown — volt-combobox-dropdown
| Entrada | Tipo | Por defecto |
|---|---|---|
| id | string | `volt-combobox-dropdown-${++nextComboboxDropdownId}` |
VoltComboboxInput — input[voltComboboxInput]
| Entrada | Tipo | Por defecto |
|---|---|---|
| id | unknown | — |
VoltComboboxOption — volt-combobox-option
| Entrada | Tipo | Por defecto |
|---|---|---|
| value * | unknown | — |
| disabled | boolean | false |
| index | number | undefined | — |
| Salida | Tipo |
|---|---|
| activated | void |
VoltCombobox — volt-combobox
| Entrada | Tipo | Por defecto |
|---|---|---|
| id | string | `volt-combobox-${++nextComboboxId}` |
| label | string | — |
| value | unknown | — |
| multiple | boolean | false |
| disabled | boolean | false |
| allowDeselect | boolean | true |
| compareWith | (a: unknown, b: unknown) => boolean | Object.is |
| dropdownPlacement | NgpComboboxPlacement | 'bottom' |
| container | string | HTMLElement | null | 'body' |
| flip | NgpFlipInput | true |
| scrollToOption | ((index: number) => void) | undefined | undefined |
| allOptions | unknown[] | undefined | undefined |
| items | unknown[] | [] |
| placeholder | string | 'Select...' |
| itemLabel | (item: unknown) => string | item => typeof item === 'string' ? item : String(item) |
| trackByFn | (index: number, item: unknown) => unknown | (_i, item) => item |
| Salida | Tipo |
|---|---|
| valueChange | unknown |
Código del componente
Instalar por CLI:
npx @voltui/cli add comboboxTypeScript
Cargando el editor…
Copia este código en tu proyecto. El componente usa ng-primitives/combobox.