sterling-svelte  1.0.12
A modern, accessible, lightweight UI component library for Svelte.
Exciting News! sterling-svelte 2.0 is out and built on Svelte 5! Read all about it here!

List

An interactive, 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 string false When true, the list and all its items are disabled
horizontal string false When true, items are arranged horizontally
selectedValue string | undefined undefined The value of the currently selected item
variant string '' Additional class names to apply
variant string '' Additional class names to apply

Event Name Data Comment
select value Raised 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

Considerations

  • Use the default slot 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.
  • Includes HTMLAnchorElement props, event, and methods

Anatomy

<div class="sterling-list">
  <slot {disabled} {horizontal} {selectedValue} {variant} />
</div>