Tree View - MudBlazor

Basic Usage

The TreeView component is designed to display hierarchical data structures. By default, each MudTreeViewItem displays its Text property.

You can also associate a data value with each item using the Value property. If a Value is not provided, the item's Text will be used as its value. This sample demonstrates a read-only implementation where items are defined with either text, a value, or both, illustrating the basic display capabilities of the component.

Getting Started
- Installation
Components
- Avatar
- Button

<MudTreeView T="string" ReadOnly>
    <MudTreeViewItem Text="Getting Started">
        <MudTreeViewItem Text="Installation" />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"Components"'>
        <MudTreeViewItem Text="Avatar" Value='"MudAvatar"' />
        <MudTreeViewItem Text="Button" Value='"MudButton"' />
    </MudTreeViewItem>
</MudTreeView>

Usage

The TreeView's appearance and behavior can be controlled with several parameters:

Hover: Applies a visual effect to an item on mouse-over.
Ripple: Enables a ripple effect on item click, unless ExpandOnDoubleClick is active.
Dense: Reduces the vertical padding of items for a more compact display.
Disabled: Prevents all user interaction with the TreeView.
ExpandOnClick: Allows expanding and collapsing of parent nodes with a single click.
ExpandOnDoubleClick: Restricts expand and collapse functionality to a double-click action. Note that this property overrides ExpandOnClick.
OnDoubleClick: This callback can be assigned to implement custom behavior for double-click events.

Applications
- Terminal
Documents
- MudBlazor
  API
  
  Components
  
  Features

ReadOnly

Hover

Ripple

Dense

Disabled

ExpandOnClick

ExpandOnDoubleClick

<MudPaper Width="300px" Elevation="0">
    <MudTreeView T="string" ReadOnly="@ReadOnly" Hover="@Hover" Dense="@Dense" Disabled="@Disabled"
                 ExpandOnClick="@ExpandOnClick" ExpandOnDoubleClick="@ExpandOnDoubleClick">
        <MudTreeViewItem Text="Applications" Expanded>
            <MudTreeViewItem Text="Terminal" />
        </MudTreeViewItem>
        <MudTreeViewItem Text="Documents" Expanded>
            <MudTreeViewItem Text="MudBlazor" Expanded>
                <MudTreeViewItem Text="API" />
                <MudTreeViewItem Text="Components" />
                <MudTreeViewItem Text="Features" />
            </MudTreeViewItem>
        </MudTreeViewItem>
    </MudTreeView>
</MudPaper>

<MudStack Row Wrap="Wrap.Wrap" Justify="Justify.Center">
    <MudSwitch @bind-Value="ReadOnly" Color="Color.Primary">ReadOnly</MudSwitch>
    <MudSwitch @bind-Value="Hover" Color="Color.Primary">Hover</MudSwitch>
    <MudSwitch @bind-Value="Ripple" Color="Color.Primary">Ripple</MudSwitch>
    <MudSwitch @bind-Value="Dense" Color="Color.Primary">Dense</MudSwitch>
    <MudSwitch @bind-Value="Disabled" Color="Color.Primary">Disabled</MudSwitch>
    <MudSwitch @bind-Value="ExpandOnClick" Color="Color.Primary">ExpandOnClick</MudSwitch>
    <MudSwitch @bind-Value="ExpandOnDoubleClick" Color="Color.Primary">ExpandOnDoubleClick</MudSwitch>
</MudStack>

@code {
    public bool ReadOnly = true;
    public bool Hover = true;
    public bool Ripple;
    public bool Dense;
    public bool Disabled;
    public bool ExpandOnClick = true;
    public bool ExpandOnDoubleClick;
}

Icons

Enhance the visual presentation of TreeView items by assigning icons. The Icon and IconColor properties can be set for each MudTreeViewItem.

This example defines a custom ExpandButtonIcon for parent nodes and provide an alternative icon for the expanded state via the IconExpanded property.

All Mail
Drafts
Orders
Categories
- Social
- Updates
- Forums
- Spam
Trash

<MudTreeView T="string">
    <MudTreeViewItem Value='"All Mail"' Icon="@Icons.Material.Filled.Email" />
    <MudTreeViewItem Value='"Drafts"' Icon="@Icons.Material.Filled.Drafts" />
    <MudTreeViewItem Value='"Orders"' Icon="@Icons.Material.Filled.Label" IconColor="Color.Secondary" />
    <MudTreeViewItem Value='"Categories"' Icon="@Icons.Custom.Uncategorized.Folder" IconExpanded="@Icons.Custom.Uncategorized.FolderOpen" IconColor="Color.Info"
                     ExpandButtonIcon="@Icons.Material.Filled.ArrowRight" ExpandButtonIconColor="Color.Primary">
        <MudTreeViewItem Value='"Social"' Icon="@Icons.Material.Filled.Group" />
        <MudTreeViewItem Value='"Updates"' Icon="@Icons.Material.Filled.Info" IconColor="Color.Tertiary" />
        <MudTreeViewItem Value='"Forums"' Icon="@Icons.Material.Filled.QuestionAnswer" />
        <MudTreeViewItem Value='"Spam"' Icon="@Icons.Material.Filled.LocalOffer" />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"Trash"' Icon="@Icons.Material.Filled.Delete" />
</MudTreeView>