Question

我在格式化列表时遇到麻烦，那是一棵Angular 6/7树。我想让下划线出现在list元素的图标和文本下。我也很难将list元素的高度和填充设置成一个合适的大小，并且其中的材料垂直居中。

我用来构建树的html是这样的：

<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <li class="mat-tree-node">
      <input type="checkbox">
      <button mat-icon-button disabled>
          <h2 class="underline"><a><div class="tree-icon"><mat-icon>{{node.iconname}}</mat-icon></div><div class="tree-text">{{node.name}}</div></a></h2>
      </button>
    </li>
  </mat-tree-node>

  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
    <li>
      <div class="mat-tree-node">
        <input type="checkbox">
        <button mat-icon-button matTreeNodeToggle
                [attr.aria-label]="'toggle ' + node.name">
          <h2 class="underline"><a><div class="tree-icon"><mat-icon>{{node.iconname}}</mat-icon></div><div class="tree-text">{{node.name}}</div></a></h2>
        </button>
      </div>
      <ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>

这是scss：

.example-tree-invisible {
  display: none;
}

.example-tree li,
.example-tree ul {
  padding-left: 10px;
  list-style-type: none;
}

.underline {background: #ff5e33;}

h2.underline > a {
  text-decoration: none;
  color: #000;
  z-index: 1;
}

h2.underline > a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: 0;
  left: 0;
  background: #9CF5A6;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
}

h2.underline > a:hover:before,
h2.underline > a:focus:before {
  visibility: visible;
  transform: scaleX(1);
}

.underline a:before {
  background: rgba(255, 0, 0, 1.0);
  box-shadow: 0 0 10px 2px #5900ff;  
}

.tree-icon {
  margin-top: 8px;
  float: left;
}

.tree-text {
  float: left;
  padding-left: 10px;
}

.mat-icon {
  margin-top: -8px;
}

.tree-text {
  white-space: nowrap;
}

https://angular-pjezzg.stackblitz.io

我的scss甚至是Typescript中缺少什么？

Answer 1

我找到了。它需要这样重写：

这些：

<h2 class="underline"><a><div class="tree-icon"><mat-icon>{{node.iconname}}</mat-icon></div><div class="tree-text">{{node.name}}</div></a></h2>

需要为：

<h2 class="underline"><a><mat-icon style="margin-top: 5px;">{{node.iconname}}</mat-icon><span style="margin-top: -8px;">{{node.name}}</span></a></h2>

并且scss需要添加以下行：

*, *:after, *:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

* {margin:0;padding:0;border:0 none;position: relative; outline: none;
}

角度2元素下划线

1 个答案: