Tree view

A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children may be expanded or collapsed to show or hide the children.

Use cases:

• Creating a file system navigator that uses a tree view to display folders and files. An item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both.
• Creating a hierarchical diagram of profiles

Example

RootItem 1Sub-item 1-1Sub-item 1-2Item 2Sub-item 2-1Sub-item 2-2Item 3

Genesis

Declaration

<rapid-tree-view>
  <rapid-tree-item></rapid-tree-item>
</rapid-tree-view>

Usage

@customElement({
  name: 'my-element',
  template: html<MyElement>`
    <rapid-tree-view>
      Root
      <rapid-tree-item>
        Item 1
        <rapid-tree-item>Sub-item 1-1</rapid-tree-item>
        <rapid-tree-item>Sub-item 1-2</rapid-tree-item>
        <rapid-tree-item>
          Item 2
          <rapid-tree-item>Sub-item 2-1</rapid-tree-item>
          <rapid-tree-item>Sub-item 2-2</rapid-tree-item>
        </rapid-tree-item>
      </rapid-tree-item>
      <rapid-tree-item>Item 3</rapid-tree-item>
    </rapid-tree-view>
  `,
})
export class MyElement extends GenesisElement { }

React

Declaration

<rapid-tree-view>
  <rapid-tree-item></rapid-tree-item>
</rapid-tree-view>

Usage

export function MyComponent() {
  return (
    <rapid-tree-view>
      Root
      <rapid-tree-item>
        Item 1
        <rapid-tree-item>Sub-item 1-1</rapid-tree-item>
        <rapid-tree-item>Sub-item 1-2</rapid-tree-item>
        <rapid-tree-item>
          Item 2
          <rapid-tree-item>Sub-item 2-1</rapid-tree-item>
          <rapid-tree-item>Sub-item 2-2</rapid-tree-item>
        </rapid-tree-item>
      </rapid-tree-item>
      <rapid-tree-item>Item 3</rapid-tree-item>
    </rapid-tree-view>)
}

Angular

Declaration

<rapid-tree-view>
  <rapid-tree-item></rapid-tree-item>
</rapid-tree-view>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-component',
  template: `
    <rapid-tree-view>
      Root
      <rapid-tree-item>
        Item 1
        <rapid-tree-item>Sub-item 1-1</rapid-tree-item>
        <rapid-tree-item>Sub-item 1-2</rapid-tree-item>
        <rapid-tree-item>
          Item 2
          <rapid-tree-item>Sub-item 2-1</rapid-tree-item>
          <rapid-tree-item>Sub-item 2-2</rapid-tree-item>
        </rapid-tree-item>
      </rapid-tree-item>
      <rapid-tree-item>Item 3</rapid-tree-item>
    </rapid-tree-view>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class MyComponent { }

Tree View API

API examples shown with Genesis component syntax, and closing tag omitted.

Attributes

Attribute	Type	Description	Example
render-collapsed-nodes	boolean	If set true the tree view will appear expanded as if by being expanded by the user	<rapid-tree-view ?render-collapsed-nodes=${x => x.showTree}>

Properties

Property	Type	Description	Example
currentSelected	HTMLElement | TreeItem | null	The currently selected tree item. It is likely you'll want to read this value instead of writing to it.	const value = treeRef.currentSelected;

Slots

Slot	Description
Default	The default slot for content or (<rapid-tree-item>)

Parts

This component doesn't have any parts.

Events fired

This component doesn't fire any events.

Events listened to

This component doesn't listen to any events.

Tree item API

API examples shown with Genesis component syntax, and closing tag omitted.

Attributes

Attribute	Type	Description	Example
expanded	boolean	When true, the control will appear expanded by user interaction. Emits expanded-change event when changed. Note: is not set when the user interacts with the item, so only use this attribute to pre-expand the item open rather than read the state.	<rapid-tab expanded>
selected	boolean	When true, the control will appear selected by user interaction. Emits selected-change event when changed. Note: is not set when the user interacts with the item, so only use this attribute to pre-select the item open rather than read the state.	<rapid-tab selected>
disabled	boolean	When true, the control will be immutable by user interaction.	<rapid-tab disabled>

Properties

This component doesn't have any properties that are not also controlled via attributes.

Slots

Slot	Description
Default	The default slot for tree item text content
start	Content which can be provided before the tree item content
end	Content which can be provided after the tree item content
item	The slot for tree items (<rapid-tree-item> manage this assignment themselves)
expand-collapse-button	The expand/collapse button

Parts

Part	Description
positioning-region	The element used to position the tree item content with exception of any child nodes
content-region	The element containing the expand/collapse, start, and end slots
items	The element wrapping any child items
expand-collapse-button	The expand/collapse button

Events fired

Event	Type	Description	Example
expanded-change	boolean	Emitted when the expanded attribute is changed	<rapid-tree-item @expanded-change="${(x) => x.myChangeHandler()}">
selected-change	boolean	Emitted when the selected attribute is changed	<rapid-tree-item @selected-change="${(x) => x.myChangeHandler()}">

Events listened to

This component doesn't listen to any events.