List

An scrollable set of items where a single item can be selected.

Code

<script lang="ts">
  import { List } from '@geoffcox/sterling-svelte';
</script>

<List>
  <!-- <ListItem> ... -->
</List>

Members

Property Name	Type	Default	Comment
disabled	boolean \| null \| undefined	false	When true, the list and all its items are disabled.
horizontal	boolean \| null \| undefined	false	When true, items are arranged horizontally.
selectedValue	string \| undefined	undefined	The value of the currently selected item.
onSelect	(value: string \| undefined) => void		Called when the selectedValue changes.

	Method Name	Parameters	Return Type	Comment
	scrollToItem			Scrolls to the item with the given value.
	selectItem			Selects the item with the given value.
	selectNextItem			Selects the item after the selected item.
	selectPreviousItem			Selects the item before the selected item.
	selectFirstItem			Selects the first item in the list.
	selectLastItem			Selects the last item in the list.

Use the children to provide list items.
A list item is identified by having data-value and role="listitem" properties. Any content without these properties, will not participate in selection. This allows you to mix in other content with list items such as search boxes, group headers, or decorations.
If no item is selected, selectNextItem selects the first item in the list and selectPreviousItem selects the last item in the list.
A container wraps the children to allow scrolling when the list dimensions are not set and take up available room.
Includes HTMLDivElement props, events, and methods.

list (<div>)
  container (<div>)
    children (Snippet)