Dropdown

import { Dropdown } from 'fluentui-svelte';

El Dropdown permite seleccionar una o varias opciones de una lista de elementos DropdownOption. Las opciones pueden mostrar contenido enriquecido, como una Persona, y la selección actual se expone mediante un valor enlazable.

Uso

<script>
	import { Dropdown, DropdownOption } from 'fluentui-svelte';
</script>

<Dropdown aria-label="Choose an option">
	<DropdownOption value="A" text="Option A">Option A</DropdownOption>
	<DropdownOption value="B" text="Option B">Option B</DropdownOption>
</Dropdown>

Forma

Usa shape: rounded (predeterminada), square o circular.

Ver Código

<script>
  import { Dropdown, DropdownOption } from 'fluentui-svelte';
</script>

<Dropdown shape="rounded" aria-label="rounded" value="svelte">
  <DropdownOption value="svelte" text="Svelte">Svelte</DropdownOption>
</Dropdown>
<Dropdown shape="square" aria-label="square" value="svelte">
  <DropdownOption value="svelte" text="Svelte">Svelte</DropdownOption>
</Dropdown>
<Dropdown shape="circular" aria-label="circular" value="svelte">
  <DropdownOption value="svelte" text="Svelte">Svelte</DropdownOption>
</Dropdown>

Contenido personalizado en las opciones

Las opciones pueden mostrar cualquier contenido, como una Persona. Pasa la propiedad text para que el desplegable cerrado siga mostrando la selección.

Ver Código

<Dropdown aria-label="Choose an option">
  <DropdownOption value="John Doe" text="John Doe">
    <Persona name="John Doe" primaryText="Software Engineer" presence={{ status: 'available' }} avatarProps={{ color: 'colorful', idForColor: '' }} />
  </DropdownOption>
  <DropdownOption value="B" text="Option B">Option B</DropdownOption>
  <DropdownOption value="C" text="Option C">Option C</DropdownOption>
</Dropdown>

Selección múltiple

Activa la propiedad multiple para permitir seleccionar más de una opción a la vez manteniendo pulsado Ctrl (o Cmd en Mac).

Ver Código

<Dropdown multiple aria-label="Choose options">
  <DropdownOption value="A" text="Option A">Option A</DropdownOption>
  <DropdownOption value="B" text="Option B">Option B</DropdownOption>
  <DropdownOption value="C" text="Option C">Option C</DropdownOption>
</Dropdown>

Atributos de los controles de formulario

Los atributos y eventos se aplican al campo nativo del formulario; ref permite acceder a él. Para el contenedor, usa wrapperAttributes y wrapperRef.

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`	`'Select an option'`	El texto que muestra el trigger mientras no hay ninguna opción seleccionada.
`disabled`	`boolean`		Deshabilita la interacción del usuario.
`name`	`string` \| `null`		El nombre con el que se envía el valor. Sin él, el formulario no incluye el valor, como con cualquier campo.
`wrapperRef` bindable	`HTMLDivElement` \| `null`		La referencia DOM del elemento contenedor.
`wrapperAttributes`	`HTMLAttributes`		Los atributos que se aplican al elemento wrapper.
`ref` bindable	`HTMLSelectElement` \| `null`		La referencia DOM del select nativo que guarda el valor. El resto de atributos del dropdown se aplican a él.
`buttonRef` bindable	`HTMLButtonElement` \| `null`		La referencia DOM del botón que abre el dropdown.
`buttonAttributes`	`HTMLButtonAttributes`		Los atributos que se aplican al botón que abre el dropdown.
`flyoutRef` bindable	`HTMLDivElement` \| `null`		La referencia del DOM del elemento flyout.
`flyoutProps`	`FlyoutProps`		Las props que se aplican al flyout.
`flyoutMaxHeight`	`string`		La altura máxima del flyout, como longitud CSS.
`listboxRef` bindable	`HTMLUListElement` \| `null`		La referencia del DOM del elemento listbox.
`listboxProps`	`ListViewProps`		Las props que se aplican al listbox que se renderiza dentro del flyout.
`children`	`Snippet`		Los elementos `DropdownOption` de la lista.
`DropdownMultipleValue` \| `DropdownSingleValue`
`NativeFieldAttributes<HTMLSelectAttributes>`

Propiedades de DropdownOption

Name	Type	Default	Description
`text`	`string`		El texto que muestra el dropdown una vez seleccionada la opción. Si no se indica, se usa el contenido renderizado, que el servidor no puede leer: indícalo al renderizar en el servidor.
`ListViewItemProps<'li'>`

Componentes

Uso

Forma

Contenido personalizado en las opciones

Selección múltiple

Atributos de los controles de formulario

Propiedades del componente

Propiedades de DropdownOption