Basic
Basic TreeView, icon button with hover and click to expand sub items.
Getting Started
Installation
Components
Avatar
Button
<MudTreeView T="string"> <MudTreeViewItem Value="@("Getting Started")"> <MudTreeViewItem Value="@("Installation")" /> </MudTreeViewItem> <MudTreeViewItem Value="@("Components")"> <MudTreeViewItem Value="@("Avatar")" /> <MudTreeViewItem Value="@("Button")" /> </MudTreeViewItem> </MudTreeView>
Hoverable
If Hover is set to true, all treeview items will have a hover effect on mouse-over.
content
logo.png
src
mudblazor.docs
mudblazor.docs.server
<MudPaper Width="300px" Elevation="0"> <MudTreeView T="string" Hover="true"> <MudTreeViewItem Value="@("content")"> <MudTreeViewItem Value="@("logo.png")" /> </MudTreeViewItem> <MudTreeViewItem Value="@("src")"> <MudTreeViewItem Value="@("mudblazor.docs")" /> <MudTreeViewItem Value="@("mudblazor.docs.server")" /> </MudTreeViewItem> </MudTreeView> </MudPaper>
Dense
If Dense is set to true, compact vertical padding will be applied to all treeview items.
content
logo.png
src
mudblazor.docs
mudblazor.docs.server
<MudPaper Width="300px" Elevation="0"> <MudTreeView T="string" Dense="true" Hover="true"> <MudTreeViewItem Value="@("content")"> <MudTreeViewItem Value="@("logo.png")" /> </MudTreeViewItem> <MudTreeViewItem Value="@("src")"> <MudTreeViewItem Value="@("mudblazor.docs")" /> <MudTreeViewItem Value="@("mudblazor.docs.server")" /> </MudTreeViewItem> </MudTreeView> </MudPaper>