Dropdown Select — Fluent UI Svelte

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.

Este componente está disponible en acceso anticipado.

La API, las características y el comportamiento del componente están sujetos a cambios significativos. Recomendamos encarecidamente no usar este componente en entornos de producción por el momento.

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.

Ver Código

<DropdownSelect>
  <DropdownSelectOption value="John Doe" text="John Doe">
    <Persona name="John Doe" primaryText="Software Engineer" presence={{ status: 'available' }} avatar={{ color: 'colorful', idForColor: '' }} />
  </DropdownSelectOption>
  <DropdownSelectOption value="B">Option B</DropdownSelectOption>
  <DropdownSelectOption value="C">Option C</DropdownSelectOption>
</DropdownSelect>

Selección múltiple

Activa la propiedad multiple para permitir seleccionar más de una opción a la vez.

Ver Código

<DropdownSelect multiple>
  <DropdownSelectOption value="A">Option A</DropdownSelectOption>
  <DropdownSelectOption value="B">Option B</DropdownSelectOption>
  <DropdownSelectOption value="C">Option C</DropdownSelectOption>
</DropdownSelect>

Propiedades del componente

Name	Type	Default	Description
`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`		La referencia del DOM del elemento select.
`wrapperRef` bindable	`HTMLDivElement`		La referencia DOM del elemento contenedor.
`wrapperProps`	`HTMLAttributes`		Los atributos que se aplican al elemento wrapper.
Element Attributes (`select`)

Propiedades de DropdownSelectOption

Name	Type	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`	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`)