角度材料 - 为树添加分支线？ [英] Angular material - Add branch lines for tree?

问题描述

我用

但是如何添加分支线？类似的东西（来自

解决方案

没有此类功能盒子。但是你可以通过CSS应用它。
有一个工作示例

I've created a simple tree with Angular material tree :

https://stackblitz.com/edit/angular-exhejg-vx5i7c?file=app/tree-dynamic-example.html

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" >
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding   >
    <button mat-icon-button ></button>
    {{node.item}}
  </mat-tree-node>


  <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding   >
    <button mat-icon-button 
            [attr.aria-label]="'toggle ' + node.filename" matTreeNodeToggle>
      <mat-icon class="mat-icon-rtl-mirror">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.item + '2'}}
    <mat-progress-bar *ngIf="node.isLoading"
                      mode="indeterminate"
                      class="example-tree-progress-bar"></mat-progress-bar>
  </mat-tree-node>


</mat-tree>

It looks like :

But how can I add branch lines ? something like (from here):

解决方案

There are no such functionality out of the box. But you can apply it via CSS. There is a working example

这篇关于角度材料 - 为树添加分支线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！