Preview

Usage

<cs-tree-view id="my-tree" aria-label="File tree"></cs-tree-view>
<script>
  const tree = document.getElementById('my-tree');
  tree.items = [
    { id: 'src', label: 'src', children: [
      { id: 'index', label: 'index.ts' },
    ]},
    { id: 'readme', label: 'README.md' },
  ];
  tree.renderItem = (item) => {
    const icon = document.createElement('cs-icon');
    icon.setAttribute('name', item.children ? 'folder' : 'file');
    return { content: item.label, icon };
  };
  tree.getItemId = (item) => item.id;
  tree.getItemChildren = (item) => item.children;
  tree.expandedItems = ['src'];
</script>

Properties

aria-describedbystring

Sets the aria-describedby property on the tree view.

aria-labelstring

Provides an aria-label to the tree view that screen readers can read (for accessibility). Don't use ariaLabel and ariaLabelledby at the same time.

aria-labelledbystring

Sets the aria-labelledby property on the tree view. If there's a visible label element that you can reference, use this instead of ariaLabel. Don't use ariaLabel and ariaLabelledby at the same time.

connector-linesTreeViewProps.ConnectorLinesVariant

Shows connector lines highlighting hierarchy between parent and child items.

expanded-itemsReadonlyArray<string>

Provides the IDs of the expanded tree view items. It controls whether an item is expanded or collapsed.

get-item-children(item: T, index: number) => ReadonlyArray<T> | undefinedrequired

Specifies the nested items that are displayed when a tree view item gets expanded.

get-item-id(item: T, index: number) => stringrequired

Provides a unique identifier for each tree view item.

i18n-stringsTreeViewProps.I18nStrings<T>

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

itemsReadonlyArray<T>required

Specifies the top-level items to display in the tree view. Use getItemChildren to provide nested items.

render-item(item: T, index: number) => TreeViewProps.TreeItemrequired

Use this property to map your data to tree view items. This property must return an object with the following properties:

• content (unknown) - The content of the item.
• icon (unknown) - (Optional) The icon of the item.
• secondaryContent (unknown) - (Optional) Secondary content of the item, such as a description of the item.
• actions (unknown) - (Optional) Actions related to the item. Use button with inline-icon or inline-link variants. For items with multiple actions, use button dropdown with the inline-icon variant.
• announcementLabel (string) - (Optional) An announcement label for the item, used for labeling the toggle button. By default, the content is used. Make sure to provide the announcementLabel if content is not a string.

render-item-toggle-icon(data: TreeViewProps.ItemToggleRenderIconData) => unknown

Use this property to display a custom icon in the toggle button.

Events

itemToggleCustomEvent<TreeViewProps.ItemToggleDetail<T>>

Called when an item expands or collapses.