Skip to content

docs(material/tree): add instructing to use flat tree for best perfor… #25211

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

Merged
merged 1 commit into from
Nov 28, 2022
Merged

docs(material/tree): add instructing to use flat tree for best perfor… #25211

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 5 additions & 3 deletions src/material/tree/tree.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ data source input and template, except that its element and attribute selectors
with `mat-` instead of `cdk-`.

There are two types of trees: Flat tree and nested tree. The DOM structures are different for these
two types of trees.
two types of trees. Flat trees generally offer better performance, while nested trees provide
flexibility.

#### Flat tree
In a flat tree, the hierarchy is flattened; nodes are not rendered inside of each other,
Expand All @@ -26,8 +27,9 @@ used to style the node such that it is indented to the appropriate level.

<!-- example(tree-flat-overview) -->

Flat trees are generally easier to style and inspect. They are also more friendly to
scrolling variations, such as infinite or virtual scrolling
Flat trees are generally easier to style and inspect. They are also more friendly to scrolling
variations, such as infinite or virtual scrolling. Flat trees
generally offer better performance.

<!--TODO(tinayuangao): Add a flat tree example here -->

Expand Down