Light Dark System

Tree Item

<p-tree-item> | PTreeItem
Since 1.0 stable

A tree item serves as a hierarchical node that lives inside a tree.

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

import PTree from 'pure-uikit/dist/react/tree';
import PTreeItem from 'pure-uikit/dist/react/tree-item';

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

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 
<p-tree>
  <p-tree-item>
    Item 1
    <p-tree-item>
      Item A
      <p-tree-item>Item Z</p-tree-item>
      <p-tree-item>Item Y</p-tree-item>
      <p-tree-item>Item X</p-tree-item>
    </p-tree-item>
    <p-tree-item>Item B</p-tree-item>
    <p-tree-item>Item C</p-tree-item>
  </p-tree-item>
  <p-tree-item>Item 2</p-tree-item>
  <p-tree-item>Item 3</p-tree-item>
</p-tree>

import PTree from 'pure-uikit/dist/react/tree';
import PTreeItem from 'pure-uikit/dist/react/tree-item';

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

Selected

Use the selected attribute to select a tree item initially.

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

import PTree from 'pure-uikit/dist/react/tree';
import PTreeItem from 'pure-uikit/dist/react/tree-item';

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

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 
<p-tree>
  <p-tree-item expanded>
    Item 1
    <p-tree-item expanded>
      Item A
      <p-tree-item>Item Z</p-tree-item>
      <p-tree-item>Item Y</p-tree-item>
      <p-tree-item>Item X</p-tree-item>
    </p-tree-item>
    <p-tree-item>Item B</p-tree-item>
    <p-tree-item>Item C</p-tree-item>
  </p-tree-item>
  <p-tree-item>Item 2</p-tree-item>
  <p-tree-item>Item 3</p-tree-item>
</p-tree>

import PTree from 'pure-uikit/dist/react/tree';
import PTreeItem from 'pure-uikit/dist/react/tree-item';

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

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.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/pure-uikit@1.3.13/cdn/components/tree-item/tree-item.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/pure-uikit@1.3.13/cdn/components/tree-item/tree-item.js';

To import this component using a bundler:

import 'pure-uikit/dist/components/tree-item/tree-item.js';

To import this component as a React component:

import PTreeItem from 'pure-uikit/dist/react/tree-item';

Slots

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

Learn more about using slots.

Properties

Name Description Reflects Type Default
expanded Expands the tree item. 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
p-expand onPExpand Emitted when the tree item expands. -
p-after-expand onPAfterExpand Emitted after the tree item expands and all animations are complete. -
p-collapse onPCollapse Emitted when the tree item collapses. -
p-after-collapse onPAfterCollapse Emitted after the tree item collapses and all animations are complete. -
p-lazy-change onPLazyChange Emitted when the tree item’s lazy state changes. -
p-lazy-load onPLazyLoad Emitted when a lazy item is selected. Use this event to asynchronously load data and append items to the tree before expanding. After appending new items, remove the lazy attribute to remove the loading state and update the tree. -

Learn more about events.

Methods

Name Description Arguments
getChildrenItems() Gets all the nested tree items in this node. { includeDisabled = true }: { includeDisabled?: boolean }

Learn more about methods.

Parts

Name Description
base The component’s base wrapper.
item The tree item’s container. This element wraps everything except slotted tree item children.
item--disabled Applied when the tree item is disabled.
item--expanded Applied when the tree item is expanded.
item--indeterminate Applied when the selection is indeterminate.
item--selected Applied when the tree item is selected.
indentation The tree item’s indentation container.
expand-button The container that wraps the tree item’s expand button and spinner.
spinner The spinner that shows when a lazy tree item is in the loading state.
spinner__base The spinner’s base part.
label The tree item’s label.
children The container that wraps the tree item’s nested children.
checkbox The checkbox that shows when using multiselect.
checkbox__base The checkbox’s exported base part.
checkbox__control The checkbox’s exported control part.
checkbox__control--checked The checkbox’s exported control--checked part.
checkbox__control--indeterminate The checkbox’s exported control--indeterminate part.
checkbox__checked-icon The checkbox’s exported checked-icon part.
checkbox__indeterminate-icon The checkbox’s exported indeterminate-icon part.
checkbox__label The checkbox’s exported label part.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <p-checkbox>
  • <p-icon>
  • <p-spinner>