javascript - Angular Material 树 - 样式可能性

Question

我选择 Angular material tree component超过FancyTree js component因为 typescript 支持。

我发现 Material 树组件除了颜色(主题)之外没有太多样式选项。

如何使 Material 树组件看起来像following fancy tree style ？

FancyTree还有有趣的事件绑定(bind)功能， Material 树也提供这个功能吗？

Answer 1

您可以添加事件并按照您喜欢的方式设置其样式。根据您的“花式树样式”链接，您唯一需要的就是按照您喜欢的方式设置文本样式(字体系列、字体大小、字体粗细等)，并添加一个 Material 图标来控制文件夹的打开状态，如下所示在我下面的示例代码中:

<cdk-nested-tree-node
*cdkTreeNodeDef="let node; when: hasChild"
class="tree-node"
>
<button
  mat-icon-button
  [attr.aria-label]="'toggle ' + node.name"
  cdkTreeNodeToggle
>
  <mat-icon class="mat-icon-rtl-mirror">
    {{ treeControl.isExpanded(node) ? "expand_more" : "chevron_right" }}
  </mat-icon>
  //here is an additional icon and conditional to follow up with open close state which is actually what you wanted if I am not mistaken 
  <mat-icon class="mat-icon-rtl-mirror">
    {{ treeControl.isExpanded(node) ? "folder" : "folder_open" }}
  </mat-icon>
  //icon ends here 
</button>

{{ node.name }}
<div [class.tree-invisible]="!treeControl.isExpanded(node)">
  <ng-container cdkTreeNodeOutlet></ng-container>
</div>

所以你会得到与你提供的链接类似的外观和感觉(“花式树样式”):

希望这会有所帮助!