html - 使用 angular 和 fxflex 在一条线上制作树形 UI

Question

我想做一个有 parent 和 child 的树形复选框，我想让 parent 和 child 在一条线上。

我已经做了树，但是父树和子树不在一条线上:

            <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
                    <div>
                        <button mat-icon-button disabled>
                        </button>
                        <td fxFlex="150px" fxLayoutAlign="start">
                            {{node.title}}
                          </td> 
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_view"></mat-checkbox>
                          </td> 
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_insert"></mat-checkbox>
                          </td>
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_update"></mat-checkbox>
                          </td>
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_delete"></mat-checkbox>
                          </td>
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_export"></mat-checkbox>
                          </td> 
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_upload"></mat-checkbox>
                          </td>
                          <td fxFlex="130px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.need_approve"></mat-checkbox>
                          </td>
                    </div>
            </mat-tree-node>
            <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">

                    <div class="mat-tree-node">
                        <button mat-icon-button matTreeNodeToggle>
                            <mat-icon>
                                {{tc.isExpanded(node) ? 'keyboard_arrow_down' : 'chevron_right'}}
                              </mat-icon>
                </button>
                <tr >
                          <td fxFlex="150px" fxLayoutAlign="start">
                            {{node.title}}
                          </td> 
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_view" (change)="update('can_view',node.id,$event.checked)" ></mat-checkbox>
                          </td> 
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_insert" (change)="update('can_insert',node.id,$event.checked)"></mat-checkbox>
                          </td>
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_update" (change)="update('can_update',node.id,$event.checked)"></mat-checkbox>
                          </td>
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_delete" (change)="update('can_delete',node.id,$event.checked)"></mat-checkbox>
                          </td>
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_export" (change)="update('can_export',node.id,$event.checked)"></mat-checkbox>
                          </td> 
                          <td fxFlex="100px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.can_upload" (change)="update('can_upload',node.id,$event.checked)"></mat-checkbox>
                          </td>
                          <td fxFlex="130px" fxLayoutAlign="center">
                              <mat-checkbox [(ngModel)]="node.need_approve" (change)="update('need_approve',node.id,$event.checked)"></mat-checkbox>
                          </td>     
                      </tr>
                    </div>
                    <div style="margin-left:1em" [hidden]="!tc.isExpanded(node)">
                        <ng-container matTreeNodeOutlet></ng-container>
                    </div>
            </mat-nested-tree-node>
        </mat-tree>
    </tbody>

我做了一棵树，它有一个父项和一个子项，我希望复选框位置在一条线上。

Answer 1

您要找的东西是:MatTreeNodePadding .您可以使用 matTreeNodePaddingIndent，这是每个级别的缩进。 Material Design 菜单子(monad)菜单规范中的默认数字 40px。

只需将它添加到您的 mat-tree-node 中，如下所示:

<mat-tree-node ... matTreeNodePadding matTreeNodePaddingIndent="0">
 ...
</mat-tree-node>