Vivid Logo Vivid

Tree Item

Represents a tree-item custom element. Read more about vwc-tree-view.

Members

Text

  • Type: string
  • Default: undefined

Icon

Use icon slot or icon(deprecated) attribute to set an icon to the tree item. Check out the vivid icons gallery for a list of available icons.

The icon prop is deprecated (as of 05/25) and directly replaced with icon slot. icon is still functional in the component but will be removed in a future major release. This will be communicated when it's removal becomes a release candidate at the end of the support period.

  • Type: string
  • Default: undefined

Selected

Add the selected attribute to select the tree item.

  • Type: boolean
  • Default: false

Disabled

Add the disabled attribute to disable the tree item.

  • Type: boolean
  • Default: false

Expanded

Use the expanded attribute to set the tree-item's open state.

  • Type: boolean
  • Default: false

Slots

Item

Icon

Set the icon slot to show an icon before the tree item's text. If set, the icon attribute is ignored.

Events

Name Type Bubbles Composed Description
expanded-change CustomEvent<HTMLElement> Yes Yes Fires a custom 'expanded-change' event when the expanded state changes
selected-change CustomEvent<HTMLElement> Yes Yes Fires a custom 'selected-change' event when the selected state changes