Skip to main content
Version: 8.1

Perspective - Tree

Component Palette Icon:

Description‚Äč

The Tree component displays a tree hierarchy based on an array of objects. Icons can be chosen for the nodes of the tree, and different icons can be used when an node is expanded or collapsed.

Properties‚Äč

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

NameDescriptionProperty Type
itemsAn array of objects, each of which represents a node on the tree.
  • label: Label text for the list item. Value is string.
  • expanded: Whether or not the tree appears with all levels expanded. Value is boolean.
  • data: String data for¬†list¬†item. Value is string.
  • items: An array of objects, each of which represents a child node on the tree. Value is an array.
  • array
    interactableIf set to false, the tree is displayed but the user can't interact with it in the runtime. Default is true.value: boolean
    selectionHolds the item index path of the current selection.value: string
    selectionDataArray of objects containing the data and index path for all currently selected nodes.
  • itemPath: Index path. Value is numeric.
  • value: The value of the 'data' property for the selected node. Value is string.
  • array
    appearanceSettings for the appearance of the tree. Click here to see the appearance properties.object
    styleSets a style for this component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object

    appearance Properties‚Äč

    NameDescriptionProperty Type
    textOverflowSetting indicating whether overflowing text should cause the entire tree to scroll horizontally or whether the text should be truncated with an ellipsis. Default is scroll.value: string dropdown
    expandIconsSettings for the expand icons . Options as follows:
  • collapsed: Icon appearance when path is collapsed.
    • Color: Fill color to apply to the icon.
    • style: Sets a style for the icon.¬†Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
  • expanded: Icon appearance when path is expanded.
    • Color: Fill color to apply to the icon.
    • style: Sets a style for the icon.¬†Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
  • empty: Icon appearance when path is empty.
    • Color: Fill color to apply to the icon.
    • style: Sets a style for the icon.¬†Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
    object
    defaultNodeIconsSettings for the node icons. Options as follows:
  • collapsed: Icon appearance when path is collapsed.
    • Color: Fill color to apply to the icon.
    • style: Sets a style for the icon.¬†Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
  • expanded: Icon appearance when path is expanded.
    • Color: Fill color to apply to the icon.
    • style: Sets a style for the icon.¬†Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
  • empty: Icon appearance when path is empty.
    • Color: Fill color to apply to the icon.
    • style: Sets a style for the icon.¬†Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
    object
    selectedStyleSets a style for when nodes are selected. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object
    unselectedStyleSets a style for when nodes are unselected. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object
    rowHeightHeight, in pixels, of each row/node of the tree. Default is 24.value: numeric

    Scripting‚Äč

    See the Perspective - Tree Scripting page for the full list of scripting functions available for this component.

    Example‚Äč

    PropertyValue
    appearance.defaultNodeIcons.collapsed.pathmaterial/Play_arrow
    appearance.defaultNodeIcons.collapsed.color#D9D900
    appearance.defaultNodeIcons.expanded.pathmaterial/subdirectory_arrow_right
    appearance.defaultNodeIcons.expanded.color#FFAC47
    appearance.defaultNodeIcons.empty.pathmaterial/panorama_fish_eye
    appearance.defaultNodeIcons.empty.color#000000