css - 用线将 child 连接到垫树中的 parent

Question

我需要按照下面给出的图表构建一个垫子树。


我已经完成了图标和框，但我无法绘制线条。有人可以帮我排线吗？
我正在使用 mat 嵌套树。
这是 stackblitz 链接:https://stackblitz.com/edit/angular-qhper2
垫子图标未在 stackblitz 中加载。我只需要线条。

它可以通过 CSS 编辑 li 和 ul 标签的样式。但我不擅长 CSS。任何帮助，将不胜感激。

Answer 1

你可以使用它:

<mat-checkbox [(ngModel)]="recursive">Recursive</mat-checkbox>
 <mat-card>
  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
   <mat-nested-tree-node *matTreeNodeDef="let node">
    <li>
      <div class="mat-tree-node">  {{node.item}}</div>
    </li>
   </mat-nested-tree-node>
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
    <li class="example-tree-container">
      <div class="mat-tree-node">
        <button mat-icon-button matTreeNodeToggle
                [matTreeNodeToggleRecursive]="recursive"
              [attr.aria-label]="'toggle ' + node.filename">
          <mat-icon>
            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        {{node.item}}
    </div>
    <ul class="example-tree-nested-node">
      <div  *ngIf="treeControl.isExpanded(node)">
      <ng-container matTreeNodeOutlet></ng-container>
      </div>
    </ul>
  </li>
  
   </mat-nested-tree-node>
 </mat-tree>

你可以在这里看到完整的代码:
stackblitz