ListView Beta

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.

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>

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.

Selection Mode

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

<ListView selectionMode="multiselect" selectedItems={['Apple']}>
  {#each ['Apple', 'Banana', 'Cherry'] as item (item)}
    <ListViewItem value={item}>{item}</ListViewItem>
  {/each}
</ListView>

Checkmark

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

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

Propiedades de ListView

Propiedades de ListViewItem