ListView Beta

The ListView is a component for rendering a set of vertically stacked items. These items can be focusable, selectable, have one primary action and one or more secondary actions, and support keyboard navigation and accessibility features.

Usage

<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

This option allows you to set keyboard navigation based on your needs. For view-only data, you do not need to set this unless the items perform some action. If your items have multiple actionable elements within the ListViewItem, like buttons or menus, you can set this to 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

Add and configure a checkbox for the element. You can use the same props for the Checkbox component.

Note: every actionable element inside this ListViewItem must call e.stopPropagation().

ListView Props

ListViewItem Props