Component TreeItem

TreeItem

A row component for displaying a single node in a tree view.

This is a presentational component that provides the visual representation of a tree node, including indentation, expand/collapse toggle (disclosure), icons, labels, and selection states. The Tree component uses TreeItem internally for rendering.

Design Rationale

The TreeItem component is designed to be flexible and reusable:

• Presentational only: TreeItem does not manage state - it only renders based on props passed to it
• Composition-friendly: Supports icons, labels, secondary content, and trailing elements
• Customizable appearance: Provides hooks for hover/selection background colors

Example

use yororen_ui::component::{
    tree_item, icon, label, button,
    tree_data::TreeCheckedState,
};

let item = tree_item("item-1")
    .depth(1)
    .expanded(true)
    .has_children(true)
    .selected(true)
    .disabled(false)
    .show_checkbox(true)
    .checked(TreeCheckedState::Checked)
    .indent(px(20.))
    .icon(icon("icons/folder.svg"))  // Or use IconName for built-in icons
    .label(label("My Node"))
    .secondary(label("Secondary text"))
    .trailing(button("Action"));

When to use

• When building custom tree implementations
• When you need to compose your own tree-like UI with full control over rendering
• As a building block for more complex hierarchical components

API

Constructor

• tree_item(id): Create a new tree item with the given element ID

Content

• .icon(element): Set an icon element to display before the label
• .label(element): Set the main label element (required for rendering)
• .secondary(element): Set secondary text displayed below the label
• .trailing(element): Set a trailing element (e.g., action button) displayed after the label

State

• .depth(usize): Set the indentation depth level (affects padding)
• .expanded(bool): Whether the node is expanded (shows disclosure arrow pointing down)
• .has_children(bool): Whether this node has children (shows disclosure arrow)
• .selected(bool): Whether this node is selected (shows selection background)
• .disabled(bool): Whether this node is disabled (reduced opacity)
• .checked(TreeCheckedState): Checkbox state (Checked/Unchecked/Indeterminate)
• .show_checkbox(bool): Whether to display a checkbox

Layout

• .indent(px): Indent width per depth level (default: 20px)

Styling

• .hover_bg(color): Custom hover background color
• .selected_bg(color): Custom selection background color

Interaction

• .on_context_menu(handler): Right-click handler that receives MouseDownEvent, Window, and App

Utilities

• .key(key): Alias for .id() to set a stable identity
• .child_id(suffix): Generate a child element ID by combining this component's ID with a suffix

Defaults

• Min height: 32px
• Indent: 20px per depth level
• Padding: 4px vertical, 12px right
• Border radius: 6px (md)
• Hover background: theme.surface.hover
• Selection background: theme.action.neutral.active_bg

Notes

• TreeItem uses rounded_md for border radius
• The disclosure arrow only appears when .has_children(true) is set
• When disabled, the item has reduced opacity (0.5)
• Hover and selection states are mutually exclusive - selection takes precedence

Relationship to Tree

The Tree component internally uses TreeItem to render each row. While you can use TreeItem directly for custom implementations, most use cases should use the Tree component which handles:

• Flattening of hierarchical data
• Expansion/collapse state management
• Selection state management
• Virtualized rendering for large datasets