Combobox
Поле вибору з пошуком і власним шаблоном опції.
Використання
Довідник API
VoltComboboxButton — volt-combobox-button
| Вхід | Тип | За замовчуванням |
|---|---|---|
| id | string | `volt-combobox-button-${++nextComboboxButtonId}` |
VoltComboboxDropdown — volt-combobox-dropdown
| Вхід | Тип | За замовчуванням |
|---|---|---|
| id | string | `volt-combobox-dropdown-${++nextComboboxDropdownId}` |
VoltComboboxInput — input[voltComboboxInput]
| Вхід | Тип | За замовчуванням |
|---|---|---|
| id | unknown | — |
VoltComboboxOption — volt-combobox-option
| Вхід | Тип | За замовчуванням |
|---|---|---|
| value * | unknown | — |
| disabled | boolean | false |
| index | number | undefined | — |
| Вихід | Тип |
|---|---|
| activated | void |
VoltCombobox — volt-combobox
| Вхід | Тип | За замовчуванням |
|---|---|---|
| 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 |
| Вихід | Тип |
|---|---|
| valueChange | unknown |
Код компонента
Встановити через CLI:
npx @voltui/cli add comboboxTypeScript
Завантаження редактора…
Скопіюйте цей код у свій проєкт. Компонент використовує ng-primitives/combobox.