Dropdown Select New
import { DropdownSelect } from 'fluentui-svelte';El Dropdown Select es un desplegable construido sobre el elemento select nativo. Permite elegir una opción, o varias con la propiedad multiple, de una lista de elementos DropdownSelectOption.
Forma
Usa shape: rounded (predeterminada), square o circular.
Contenido personalizado en las opciones
Las opciones pueden mostrar contenido enriquecido, como una Persona. Pasa la propiedad text para la etiqueta de texto plano de la selección.
Selección múltiple
Activa la propiedad multiple para permitir seleccionar más de una opción a la vez.
Propiedades del componente
| Name | Type | Default | Description |
|---|---|---|---|
shape | 'circular' | 'rounded' | 'square' | 'rounded' | Forma de la superficie del campo, incluidos su borde y el indicador de foco. |
value bindable | string | string[] | multiple ? [] : '' | El valor seleccionado. Un array de valores cuando multiple está activo. |
multiple | boolean | Permite seleccionar más de una opción a la vez. | |
placeholder | string | 'Native Select Dropdown' | El texto que se muestra mientras no hay ninguna opción seleccionada. |
hidePlaceholder | boolean | Mantiene el placeholder fuera de la lista de opciones una vez que hay un valor seleccionado. | |
ref bindable | HTMLSelectElement | null | La referencia del DOM del elemento select. | |
wrapperRef bindable | HTMLDivElement | null | La referencia DOM del elemento contenedor. | |
wrapperAttributes | HTMLAttributes | Los atributos que se aplican al elemento wrapper. | |
Element Attributes (select) |
Propiedades de DropdownSelectOption
| Name | Type | Default | Description |
|---|---|---|---|
value | string | El valor que se reporta al select cuando se elige la opción. | |
text | string | La etiqueta de la opción. Si no se indica, se usa el contenido renderizado. | |
disabled | boolean | Deshabilita la interacción del usuario. | |
ref bindable | HTMLElement | null | La referencia del DOM del elemento option. | |
children | Snippet | El contenido de la opción, que se usa cuando no se indica text. | |
Element Attributes (option) |