[dev-v5] FluentTreeView #DRAFT

[dvoituron]

[dev-v5] FluentTreeView

A hierarchical list structure component for displaying data in a collapsible and expandable way.

Use this component when you need to present your users with a clear visual structure of content or data,
allowing them to efficiently interact and navigate through the information.
If the information is less hierarchical or node-based, consider using a list or table instead.

You can create a Tree manually by nesting FluentTreeItem components or by using the Items property of FluentTreeView to dynamically generate a tree from a list of objects.

Example 1

<FluentTreeView @bind-SelectedId="@SelectedId">
    <FluentTreeItem Text="Flowers" IconStart="@(new Icons.Regular.Size16.LeafOne())">
        <FluentTreeItem Text="Daisy" />
        <FluentTreeItem Text="Sunflower" />
        <FluentTreeItem Text="Rose" />
    </FluentTreeItem>
</FluentTreeView>

Example 2

<FluentTreeView Items="@Items" @bind-SelectedItem="@SelectedItem">
    <ItemTemplate>
        <FluentBadge Color="BadgeColor.Informative" Content="@context.Id" />
        @context.Text
    </ItemTemplate>
</FluentTreeView>

Live example: https://fluentui-blazor-v5.azurewebsites.net/TreeView