How do I make ListView items selectable?

Set selectionMode ('single', 'multiselect', or 'extended') and bind selectedItems / handle onSelectionChange.

How do I handle items with multiple actionable elements?

Set navigationMode to 'composite' so nested buttons and menus are keyboard-navigable; call e.stopPropagation() in their handlers.

ListView

ListView es un componente para renderizar un conjunto de elementos apilados verticalmente. Estos elementos pueden recibir foco, seleccionarse, tener una acción principal y una o más acciones secundarias, y admitir navegación por teclado y características de accesibilidad.

Chile
Colombia
Dominican Republic
Costa Rica
Venezuela

Uso

<script>
	import { ListView, ListViewItem } from 'fluentui-svelte';
	let list = ['A', 'B', 'C'];
	let selected = ['A'];
</script>

<ListView selectedItems={selected}>
	{#each list as item (item)}
		<ListViewItem value={item}>{item}</ListViewItem>
	{/each}
</ListView>

API de ListView

Mejores prácticas

Consulta List para conocer las mejores prácticas.

As

Puedes controlar qué etiqueta debe usar el componente ListView: ul, ol o div. Predeterminado: ul.

Shape

En lugar de configurarlo en cada ListViewItem, puedes configurarlo aquí y cada elemento lo heredará. Los valores posibles son rounded, circular o square. Predeterminado: rounded.

Navigation Mode

Esta opción te permite configurar la navegación por teclado según tus necesidades. Para datos solo de visualización, no necesitas establecerla a menos que los elementos realicen alguna acción. Si tus elementos tienen varios elementos interactivos dentro de ListViewItem, como botones o menús, puedes establecerla en composite.

Value

Establece el valor del elemento actual. Debes configurarlo al usar el sistema de selección de ListView o si los elementos cambian dinámicamente.

On Action

Este evento se activa al hacer clic o tocar el elemento. Ejecuta la acción principal y, si el rol no es row, también ejecuta la propia selección.

Selection Mode

Use selectionMode (single, multiselect, or extended) to control how items are selected.

View Code

Checkmark

Agrega y configura una casilla de verificación para el elemento. Puedes usar las mismas propiedades para el componente Checkbox .

Card Content Inside ListItem

Nota: cada elemento interactivo dentro de este ListViewItem debe llamar a e.stopPropagation().

Propiedades de ListView

Name	Type	Description
`as`	`string`	La etiqueta HTML que se usará para el contenedor de la lista. Valores posibles: ul, ol, div.
`selectionMode`	`string`	Modo de selección para la lista. Valores posibles: single, multiselect, extended.
`navigationMode`	`string`	Modo de navegación para la navegación por teclado. Valores posibles: items, composite.
`selectedItems`	`string[]`	Los valores de los elementos seleccionados actualmente.
`shape`	`string`	La forma de los elementos de la lista. Valores posibles: rounded, circular, square.
`onSelectionChange`	`(Event, string[]) => void`	Callback que se ejecuta cuando cambia la selección.
`element`	Dynamic	Referencia al elemento DOM de la lista. Depende del valor as seleccionado.
`children`	Only `ListViewItem`	Lee más aquí
Element Attributes	Dynamic	Según el valor as elegido, tendrás autocompletado para todos los atributos HTML de esa etiqueta.

Propiedades de ListViewItem

Name	Type	Description
`as`	`string`	La etiqueta HTML que se usará para el contenedor del elemento. Valores posibles: li, a, div.
`active`	`boolean`	Indica si el elemento está actualmente activo o seleccionado.
`shape`	`string`	La forma del elemento. Valores posibles: rounded, circular, square.
`value`	`string`	El valor del elemento usado para la selección.
`onAction`	`(MouseEvent, string) => void`	Callback que se ejecuta cuando se activa el elemento.
`onFocus`	`(Event, string) => void`	Callback que se ejecuta cuando el elemento recibe foco.
`role`	`string`	Rol ARIA del elemento. Valores posibles: treeitem, menuitem, option, row.
`disabled`	`boolean`	Indica si el elemento está deshabilitado.
`checkmark`	`object`	Propiedades para el checkmark o la casilla de verificación.
`children`	`Snippet`	El contenido del elemento.
Element Attributes	Dynamic	Según el valor as elegido, tendrás autocompletado para todos los atributos HTML de esa etiqueta.