代码之家 › 专栏 › 技术社区 › Matthew Dewell

角度2元素下划线

css-animations sass angular

-3

Matthew Dewell · 技术社区 · 6 年前

我的列表格式有问题,那是一个6/7角的树。我想让下划线显示在列表元素的图标和文本下。我也很难让列表元素的高度和填充达到一个合适的大小,其中的材质垂直居中。

构建树的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中,这里缺少什么?

1 回复 | 直到 6 年前

Matthew Dewell 6 年前

我找到了。它需要像这样重写一下:

这些:

<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;
}