Select
Muestra una lista de opciones para que el usuario elija, activada por un botón.
Uso
Selected value:
Select nativo
Selected value: apple
Una alternativa más ligera a volt-select para casos sencillos: es el elemento <select> nativo de verdad (comportamiento completo del selector móvil/nativo, funciona con formControl/ngModel sin más), con estilo acorde al tema.
Referencia de la API
VoltNativeSelect — select[voltNativeSelect]
| Entrada | Tipo | Por defecto |
|---|---|---|
| disabled | boolean | false |
VoltSelectItem — volt-select-item
| Entrada | Tipo | Por defecto |
|---|---|---|
| value | unknown | undefined |
| disabled | boolean | false |
VoltSelect — volt-select
| Entrada | Tipo | Por defecto |
|---|---|---|
| placeholder | string | 'Select an option' |
| ariaLabel | string | '' |
| value | unknown | undefined |
| disabled | boolean | false |
| multiple | boolean | false |
| compareWith | (a: unknown, b: unknown) => boolean | Object.is |
| dropdownPlacement | Placement | 'bottom-start' |
| container | string | HTMLElement | null | 'body' |
| flip | NgpFlipInput | true |
| scrollToOption | ((index: number) => void) | undefined | undefined |
| allOptions | unknown[] | undefined | undefined |
| displayWith | (value: unknown) => string | value => String(value) |
| Salida | Tipo |
|---|---|
| valueChange | unknown |
Código del componente
Instalar por CLI:
npx @voltui/cli add selectTypeScript
Cargando el editor…
Copia este código en tu proyecto. El componente usa ng-primitives/select.