Default Gray Amethyst

Tree Item

<mo-tree-item> | MOTreeItem
Since 1.2 stable

Tree items are used to represent hierarchical data in a tree structure.

Item 1 Item A Item B Item C Item 2 Item 3 
<mo-tree>
  <mo-tree-item>
    Item 1
    <mo-tree-item>Item A</mo-tree-item>
    <mo-tree-item>Item B</mo-tree-item>
    <mo-tree-item>Item C</mo-tree-item>
  </mo-tree-item>
  <mo-tree-item>Item 2</mo-tree-item>
  <mo-tree-item>Item 3</mo-tree-item>
</mo-tree>

import { MOTree, MOTreeItem } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOTree>
    <MOTreeItem>
      Item 1
      <MOTreeItem>Item A</MOTreeItem>
      <MOTreeItem>Item B</MOTreeItem>
      <MOTreeItem>Item C</MOTreeItem>
    </MOTreeItem>
    <MOTreeItem>Item 2</MOTreeItem>
    <MOTreeItem>Item 3</MOTreeItem>
  </MOTree>
);

Examples

Nested tree items

A tree item can contain other tree items. This allows the node to be expanded or collapsed by the user.

Item 1 Item A Item Z Item Y Item X Item B Item C Item 2 Item 3 
<mo-tree>
  <mo-tree-item>
    Item 1
    <mo-tree-item>
      Item A
      <mo-tree-item>Item Z</mo-tree-item>
      <mo-tree-item>Item Y</mo-tree-item>
      <mo-tree-item>Item X</mo-tree-item>
    </mo-tree-item>
    <mo-tree-item>Item B</mo-tree-item>
    <mo-tree-item>Item C</mo-tree-item>
  </mo-tree-item>
  <mo-tree-item>Item 2</mo-tree-item>
  <mo-tree-item>Item 3</mo-tree-item>
</mo-tree>

import { MOTree, MOTreeItem } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOTree>
    <MOTreeItem>
      Item 1
      <MOTreeItem>
        Item A
        <MOTreeItem>Item Z</MOTreeItem>
        <MOTreeItem>Item Y</MOTreeItem>
        <MOTreeItem>Item X</MOTreeItem>
      </MOTreeItem>
      <MOTreeItem>Item B</MOTreeItem>
      <MOTreeItem>Item C</MOTreeItem>
    </MOTreeItem>
    <MOTreeItem>Item 2</MOTreeItem>
    <MOTreeItem>Item 3</MOTreeItem>
  </MOTree>
);

Selected

Use the selected attribute to select a tree item initially.

Item 1 Item A Item B Item C Item 2 Item 3 
<mo-tree>
  <mo-tree-item selected>
    Item 1
    <mo-tree-item>Item A</mo-tree-item>
    <mo-tree-item>Item B</mo-tree-item>
    <mo-tree-item>Item C</mo-tree-item>
  </mo-tree-item>
  <mo-tree-item>Item 2</mo-tree-item>
  <mo-tree-item>Item 3</mo-tree-item>
</mo-tree>

import { MOTree, MOTreeItem } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOTree>
    <MOTreeItem selected>
      Item 1
      <MOTreeItem>Item A</MOTreeItem>
      <MOTreeItem>Item B</MOTreeItem>
      <MOTreeItem>Item C</MOTreeItem>
    </MOTreeItem>
    <MOTreeItem>Item 2</MOTreeItem>
    <MOTreeItem>Item 3</MOTreeItem>
  </MOTree>
);

Expanded

Use the expanded attribute to expand a tree item initially.

Item 1 Item A Item Z Item Y Item X Item B Item C Item 2 Item 3 
<mo-tree>
  <mo-tree-item expanded>
    Item 1
    <mo-tree-item expanded>
      Item A
      <mo-tree-item>Item Z</mo-tree-item>
      <mo-tree-item>Item Y</mo-tree-item>
      <mo-tree-item>Item X</mo-tree-item>
    </mo-tree-item>
    <mo-tree-item>Item B</mo-tree-item>
    <mo-tree-item>Item C</mo-tree-item>
  </mo-tree-item>
  <mo-tree-item>Item 2</mo-tree-item>
  <mo-tree-item>Item 3</mo-tree-item>
</mo-tree>

import { MOTree, MOTreeItem } from '@metsooutotec/modes-web-components/dist/react';

const App = () => (
  <MOTree>
    <MOTreeItem expanded>
      Item 1
      <MOTreeItem expanded>
        Item A
        <MOTreeItem>Item Z</MOTreeItem>
        <MOTreeItem>Item Y</MOTreeItem>
        <MOTreeItem>Item X</MOTreeItem>
      </MOTreeItem>
      <MOTreeItem>Item B</MOTreeItem>
      <MOTreeItem>Item C</MOTreeItem>
    </MOTreeItem>
    <MOTreeItem>Item 2</MOTreeItem>
    <MOTreeItem>Item 3</MOTreeItem>
  </MOTree>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler React Script

To import this component using a bundler:

import '@metsooutotec/modes-web-components/dist/components/tree-item/tree-item.js';

To import this component as a React component:

import MOTreeItem from '@metsooutotec/modes-web-components/dist/react/tree-item/';

To import this component using a script tag:

<script type="module" src="https://modes-web.metso.com/dist/components/cdn/components/tree-item/tree-item.js"></script>

Slots

Name Description
(default) The default slot.
expanded-icon The icon to show when the item is expanded.
collapsed-icon The icon to show when the item is collapsed.

Learn more about using slots.

Properties

Name Description Reflects Type Default
expanded Expands the tree item. boolean false
hideExpandButton
hide-expand-button 		Hides the expand button. Used in Combobox without a hierarchy. boolean false
selected Draws the tree item in a selected state. boolean false
disabled Disables the tree item. boolean false
lazy Enables lazy loading behavior. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
mo-expand onMoExpand Emitted when the item expands. -
mo-after-expand onMoAfterExpand Emitted after the item expands and all animations are complete. -
mo-collapse onMoCollapse Emitted when the item collapses. -
mo-after-collapse onMoAfterCollapse Emitted after the item collapses and all animations are complete. -
mo-lazy-load onMoLazyLoad Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. -

Learn more about events.

Parts

Name Description
base The component’s internal wrapper.
item The item main container.
item--disabled Applied when the item is disabled.
item--expanded Applied when the item is expanded.
item--indeterminate Applied when the selection is indeterminate.
item--selected Applied when the item is selected.
indentation The item’s indentation container.
label The item’s label.
children The item’s children container.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.