mirror of
https://github.com/google/nomulus
synced 2026-02-05 12:31:15 +00:00
50 lines
1.4 KiB
HTML
50 lines
1.4 KiB
HTML
<mat-tree
|
|
[dataSource]="dataSource"
|
|
[treeControl]="treeControl"
|
|
class="console-app__nav-tree"
|
|
>
|
|
<mat-tree-node
|
|
*matTreeNodeDef="let node"
|
|
matTreeNodeToggle
|
|
tabindex="0"
|
|
(click)="onClick(node)"
|
|
(keyup.enter)="onClick(node)"
|
|
[class.active]="router.url.includes(node.path)"
|
|
[elementId]="getElementId(node)"
|
|
>
|
|
<mat-icon class="console-app__nav-icon" *ngIf="node.iconName">
|
|
{{ node.iconName }}
|
|
</mat-icon>
|
|
{{ node.title }}
|
|
</mat-tree-node>
|
|
<mat-nested-tree-node
|
|
*matTreeNodeDef="let node; when: hasChild"
|
|
(click)="onClick(node)"
|
|
tabindex="0"
|
|
(keyup.enter)="onClick(node)"
|
|
>
|
|
<div class="mat-tree-node" [class.active]="router.url.includes(node.path)">
|
|
<button
|
|
class="console-app__nav-icon_expand"
|
|
mat-icon-button
|
|
matTreeNodeToggle
|
|
[attr.aria-label]="'Toggle ' + node.title"
|
|
>
|
|
<mat-icon>
|
|
{{ treeControl.isExpanded(node) ? "expand_more" : "chevron_right" }}
|
|
</mat-icon>
|
|
</button>
|
|
<mat-icon class="console-app__nav-icon" *ngIf="node.iconName">
|
|
{{ node.iconName }}
|
|
</mat-icon>
|
|
{{ node.title }}
|
|
</div>
|
|
<div
|
|
[class.console-app__nav-tree_invisible]="!treeControl.isExpanded(node)"
|
|
role="group"
|
|
>
|
|
<ng-container matTreeNodeOutlet></ng-container>
|
|
</div>
|
|
</mat-nested-tree-node>
|
|
</mat-tree>
|