HoopsTreeItemElement

class ui.treeItem.HoopsTreeItemElement()

A custom element representing a tree item in a hierarchical structure. It supports expansion and selection states, and can contain child elements.

This component emits custom events for expansion (hoops-tree-item-expand) and selection (hoops-tree-item-select) changes, allowing parent components to respond to user interactions such as expanding/collapsing items and selecting items.

It is a very simple component that does not hold much logic. It is only responsible for rendering the item label, icon, and children, and handling user interactions (expansion & selection). it is meant to be used as a building block for trees without having to figure out how it works internally.

Index

Constructors

• constructor

Properties

• expanded
• hidden
• leaf
• noAnim
• selected

Methods

• willUpdate

Constructors

ui.treeItem.HoopsTreeItemElement.constructor()

HoopsTreeItemElement(): HoopsTreeItemElement

Returns: HoopsTreeItemElement

Properties

ui.treeItem.HoopsTreeItemElement.expanded

expanded: boolean

ui.treeItem.HoopsTreeItemElement.hidden

hidden: boolean

MDN Reference

ui.treeItem.HoopsTreeItemElement.leaf

leaf: boolean

ui.treeItem.HoopsTreeItemElement.noAnim

noAnim: boolean

ui.treeItem.HoopsTreeItemElement.selected

selected: boolean

Methods

ui.treeItem.HoopsTreeItemElement.willUpdate()

willUpdate(_: (PropertyValueMap | Map)): void

Invoked before update() to compute values needed during the update.

Implement willUpdate to compute property values that depend on other properties and are used in the rest of the update process.

willUpdate(changedProperties) {
  // only need to check changed properties for an expensive computation.
  if (changedProperties.has('firstName') || changedProperties.has('lastName')) {
    this.sha = computeSHA(`${this.firstName} ${this.lastName}`);
  }
}

render() {
  return html`SHA: ${this.sha}`;
}

Parameters

_: (PropertyValueMap | Map)

Returns: void