Preview

Usage

<cs-list id="my-list" aria-label="Files"></cs-list>
<script>
  const list = document.getElementById('my-list');
  list.items = ['file1.txt', 'file2.txt'];
  list.renderItem = (item) => ({ id: item, content: item });
</script>

Properties

aria-describedbystring

Adds an aria-describedby to the list.

aria-labelstring

Adds an aria-label to the list.

aria-labelledbystring

Adds an aria-labelledby to the list.

disable-item-paddingsboolean default: false

Removes padding around and inside list items.

disable-paddingsboolean default: false

Removes top and bottom padding around the list. Does not apply for sortable lists.

i18n-stringsListProps.I18nStrings

An object containing all the localized strings required by the component.

• liveAnnouncementDndStarted ((position: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when an item is picked for reordering.
• liveAnnouncementDndDiscarded (string) - (Optional) Adds a message to be announced by screen readers when a reordering action is canceled.
• liveAnnouncementDndItemReordered ((initialPosition: number, currentPosition: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when an item is being moved.
• liveAnnouncementDndItemCommitted ((initialPosition: number, finalPosition: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when a reordering action is committed.
• dragHandleAriaDescription (string) - (Optional) Adds an ARIA description for the drag handle.
• dragHandleAriaLabel (string) - (Optional) Adds an ARIA label for the drag handle.

itemsReadonlyArray<T>required

The items to display in the list.

render-item(item: T) => { id: string; content: unknown; secondaryContent?: unknown; icon?: unknown; actions?: unknown; announcementLabel?: string; }required

Render an item. The function should return an object with the following keys:

• id (string) - A unique identifier for the item.
• content (unknown) - The content of the item.
• secondaryContent (unknown) - (Optional) Secondary content, for example item description.
• icon (unknown) - (Optional) An icon, displayed at the start.
• actions (unknown) - (Optional) Action button(s).
• announcementLabel (string) - (Optional) An announcement label for the item, used when sorting. By default, the content is used: a custom label should be provided if content is not a string.

sortableboolean default: false

Makes the list sortable by enabling drag and drop functionality.

sort-disabledboolean default: false

Disables sorting drag handles. Use this to temporarily prevent users from reordering the list.

tag-override'ol' | 'ul'

The HTML tag to render. By default ul is used for standard lists and ol for sortable lists.

Events

sortingChangeCustomEvent<ListProps.SortingState<T>>

Called when items are reordered in a sortable list.