css - 在垫子树中将孩子与线连接到父母

Question

我需要按照下图构建一个垫子树。

我已经完成了图标和框，但我无法画线。谁能帮我画线？我正在使用垫嵌套树。这是 stackblitz 链接：https ://stackblitz.com/edit/angular-qhper2 垫子图标未在 stackblitz 中加载。我只需要线条。

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

标签： cssangulartreeangular-material

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>

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

堆栈闪电战