Tree View - MudBlazor

API

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;
}