Угловое подчеркивание 2 элементов - PullRequest
Новая
       10

Угловое подчеркивание 2 элементов

0 голосов
/ 14 января 2019

У меня проблемы с форматированием моего списка, это Angular 6/7 tree. Я хочу, чтобы подчеркивание появилось под значком и текстом элемента списка. У меня также возникают проблемы с приличной высотой и отступом элемента списка, когда материалы в нем центрированы вертикально.

Мой 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 Ответ

0 голосов
/ 15 января 2019

Я нашел это. Нужно было немного переписать так:

Эти: 

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