Basic
The TreeView allows exploring of hierarchic data. In its simplest form it only displays text via the Text property of its items.
But you can also attach a value of type T to each item via the Value property.
In this example ReadOnly is set to true to prevent value selection. Some items in this example have a text, some have a value and one has both. If you use
only Text and T="string" then that text will also serve as value. If you set only Value
then the text will be derived from the value. You can of course set both to have different Text and Value. This will become important
for value selection (see Selection).
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
Hover applies a hover effect on mouse-over. Ripple applies a ripple effect on click, except if
ExpandOnDoubleClick is set. Dense will result in a more compact vertical padding of the item items to save space.
Disabled will prevent all interaction with any items.
With ExpandOnClick a subtree can be expanded and collapsed by clicking on it. With ExpandOnDoubleClick,
only a double-click will expand or collapse the subtrees. Additionally, a OnDoubleClick callback can be assigned to set a custom double click behaviour.
Applications
Terminal
Documents
MudBlazor
API
Components
Features
<MudPaper Width="300px" Elevation="0"> <MudTreeView T="string" ReadOnly="" Hover="" Dense="" Disabled="" ExpandOnClick="" 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; }