角材料树-造型可能性

Question

由于打字稿的支持，我选择了material tree component上的FancyTree js component角。

我发现，材料树组件除了颜色（主题）外没有太多的样式选择。

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

FancyTree还具有有趣的事件绑定功能，材质树也提供此功能吗？

Answer 1

您可以添加事件并以自己喜欢的方式对其进行样式设置。根据您“花式树样式”的链接，您唯一需要以喜欢的方式设置文本样式（字体系列，字体大小，字体粗细等），并添加一个其他材料图标来控制文件夹的打开状态，例如在下面的示例代码中：

<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>

因此您所提供的链接（“花式树样式”）与您的外观类似：

我希望这会有所帮助！