Dropdown — Fluent UI Svelte

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>
	<DropdownOption value="A" text="Option A">Option A</DropdownOption>
	<DropdownOption value="B" text="Option B">Option B</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>
  <DropdownOption value="John Doe" text="John Doe">
    <Persona name="John Doe" primaryText="Software Engineer" presence={{ status: 'available' }} avatar={{ 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>
  <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>

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`	`'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`	`id`	El nombre que se envía con el formulario. Si no se indica, se usa el id del dropdown.
`ref` bindable	`HTMLDivElement`		La referencia DOM del elemento dropdown.
`onclick`	`(e: MouseEvent) => void`		Se llama cuando se hace clic en el dropdown.
`wrapperProps`	`HTMLAttributes`		Los atributos que se aplican al elemento wrapper.
`buttonRef` bindable	`HTMLButtonElement`		La referencia del DOM del botón que abre el dropdown.
`buttonProps`	`HTMLButtonAttributes`		Los atributos que se aplican al botón que abre el dropdown.
`inputRef`	`HTMLInputElement`		La referencia del DOM del input oculto que guarda el valor.
`flyoutRef` bindable	`HTMLDivElement`		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`		La referencia del DOM del elemento listbox.
`listboxProps`	`ListViewProps`		Las props que se aplican al listbox que se renderiza dentro del flyout.
`DropdownMultipleValue` \| `DropdownSingleValue`
`HTMLInputAttributes` without `value`, `onclick`

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.
`ListViewItemProps<'li'>`