Tree

Interface of Tree
🏗 Coming Soon

Tree, like Accordion, is a collapsible section component designed for hiding and showing content. However, unlike Accordion, Tree has a more structured interface and is best used when building tree views like a file structure or a sidebar.

Use the required label prop to set the text of the Tree disclosure. label alternatively accepts a ReactNode for more advanced layouts.

Use the icon prop to display an icon next to the Tree label.

Use detail to display an element in the negative space of the Tree label.

Use the visuallyAsBranch prop if you'd like your Tree's disclosure text to have a "normal" font weight.

This is especially useful when you want a nested Tree to match its sibling TreeItems

Created Date
Created Month
Created Year
Created Quarter
Cost
Location
ID

Use the border prop if you would like to have vertical lines expand from your Tree's indicator icon when open.

Created Date
Created Month
Created Year
Created Quarter

Nesting Trees

You can nest trees within each other by passing a Tree in as a child of another Tree.

Note: Tree will automatically indent any child Tree and TreeItems based on their depth in the hierarchy.

Tree Callbacks

Use the onOpen and onClose props if you would like to trigger callbacks on Tree open or close, respectively.

Controlling a Tree

Like Accordion, a Tree can be either uncontrolled or controlled.

By default, the Tree is an uncontrolled component and maintains its own opened/closed state. If you are using an uncontrolled Tree and want it initially open, use the defaultOpen prop.

However, you can use the isOpen and toggleOpen props to explicitly control the state of your Tree.

When the isOpen prop receives true, your Tree will reveal its content. When false, your content will be hidden.

The toggleOpen prop should receive a function that has one parameter: a boolean. When the Tree's disclosure is clicked, the toggleOpen callback will be triggered and passed the opposite boolean of the current isOpen prop value.

Cost
Location
Tier
Oui ou Non

TreeItem

Interface of TreeItem
🏗 Coming Soon

TreeItem is used to create branches in a tree view; it is best used as the direct child of a <Tree>.

Unlike Tree, TreeItem has no label prop and instead displays its child as its content. In addition, TreeItem accepts a callback via its onClick prop rather than onOpen and onClose props.

Use the detail prop to display a detail element right of the TreeItem's content.

Use the icon prop to display an icon left of the TreeItem's content.

Use the gapSize prop to control the distance between elements in your TreeItem.

Use the selected prop to display a light grey background on a given TreeItem.

Swiss
is great

Customizing Detail Elements on Tree and TreeItem

You can customize the look and behavior of detail elements using the detailAccessory and detailHoverDisclosure props.

When detailAccessory is true, events on detail elements will not propagate.

In addition, when detailAccessory is true, the hover background will not apply to the detail elements.

Cost
Location
Tier

Setting detailAccessory on a parent Tree will also apply it to all child TreeItems, as seen above.

However, you can override a parent Tree's detailAccessory prop at the TreeItem level.

Cost
Location
Tier

Use detailHoverDisclosure to hide and show detail elements on hover.

Cost
Location
Tier

Setting detailHoverDisclosure on a parent Tree will apply it to all child TreeItems.

However, you can override a parent Tree's detailHoverDisclosure prop at the TreeItem level.

Cost
Location
Tier

TreeGroup

Interface of TreeGroup
🏗 Coming Soon

TreeGroup can be used to label a grouping of TreeItems. TreeGroup should be the child of a Treeand the parent of one or many TreeItems.

Use the label prop to set the text label of the TreeGroup.

Use the color prop to set the text color of both the TreeGroup and all of its children.

American
Cream
Pepper Jack
String Cheese
English
Brighton Blue
Cheddar
Suffolk Gold

stable