Skip to content

[dev-v5] TreeView component v5 #3642

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 5 commits into
base: dev-v5
Choose a base branch
from
Draft

[dev-v5] TreeView component v5 #3642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8feeb07
First try TreeView
PascalVorwerk Apr 7, 2025
6097f26
Merge branch 'dev-v5' into users/pcwvorwerk/treeview-v5
PascalVorwerk Apr 9, 2025
974ce02
Merge branch 'dev-v5' into users/pcwvorwerk/treeview-v5
PascalVorwerk Apr 13, 2025
8c34209
Merge branch 'dev-v5' into users/pcwvorwerk/treeview-v5
PascalVorwerk May 12, 2025
19aab08
Updated packages, still no luck
PascalVorwerk May 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions ...emo/FluentUI.Demo.Client/Documentation/Components/TreeView/Examples/TreeViewDefault.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
ο»Ώ<FluentTree Size="TreeSize.Medium" Appearance="TreeAppearance.Subtle" @bind-CurrentSelected="currentSelected" OnExpandedChange="HandleOnExpandedChanged">
<FluentTreeItem Text="Root item 1">
<FluentTreeItem Text="Flowers">
<FluentTreeItem Disabled="true" Text="Daisy" />
<FluentTreeItem Text="Sunflower" />
<FluentTreeItem Text="Rose" />
</FluentTreeItem>
<FluentTreeItem Text="Nested item 2" />
<FluentTreeItem Text="Nested item 3" />
</FluentTreeItem>
<FluentTreeItem Text="Root item 2">
<FluentDivider></FluentDivider>
<FluentTreeItem Text="Flowers">
<FluentTreeItem Disabled="true" Text="Daisy" />
<FluentTreeItem Text="Sunflower" />
<FluentTreeItem Text="Rose" />
</FluentTreeItem>
<FluentTreeItem Text="Nested item 2" />
<FluentTreeItem Text="Nested item 3" />
</FluentTreeItem>
<FluentTreeItem Text="Root item 3 - Leaf Erikson" />
</FluentTree>

<p>Current selected tree item is @currentSelected?.Text</p>
<p>Most recently expanded/collapsed tree item is @currentAffected?.Text</p>

@code {
FluentTreeItem? currentSelected;
FluentTreeItem? currentAffected;

private void HandleOnExpandedChanged(FluentTreeItem item)
{
currentAffected = item;
}
}
10 changes: 10 additions & 0 deletions ...s/Demo/FluentUI.Demo.Client/Documentation/Components/TreeView/FluentTreeView.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
title: TreeView
route: /TreeView
---

# TreeView
A `FluentTreeView` is a component that displays a hierarchical list of items, allowing users to expand and collapse nodes to navigate through the tree structure.

## Default
{{ TreeViewDefault }}
3 changes: 2 additions & 1 deletion examples/Demo/FluentUI.Demo/Components/App.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,14 @@
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="FluentUI.Demo.styles.css" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />

<HeadOutlet @rendermode="@DemoRenderMode" />
</head>

<body use-reboot="@reboot">
<Routes @rendermode="@DemoRenderMode" />
<script src="_framework/blazor.web.js"></script>

<!-- Include highlight.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/vs.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
Expand Down
Loading