Добавьте треугольник внизу вкладки дизайна материала mat-ink-bar - PullRequest
Новая
       31

Добавьте треугольник внизу вкладки дизайна материала mat-ink-bar

0 голосов
/ 30 ноября 2018

Я хочу изменить стиль mat-ink-bar для Угловой вкладка материала .

Я хотел создать такой дизайн: Пример Jsfiddle

Проблема в том, что mat-ink-bar уже absolute позиционирован, и я не могу отобразить свой ::afterэлемент.Есть ли способ, как я могу это заархивировать?

Вот что я попробовал на стеке: Вкладка мат на стеке

мой стиль находится внутри style.css.Треугольник внизу скрыт, если вы используете инструмент dev.Я не мог показать это, используя z-index .. Любая помощь будет оценена.

здесь код:

css 

.c-tab .mat-ink-bar {
  height: 5px;
}

.c-tab .mat-ink-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 50px #3f51b5;
    border-left: solid 50px transparent;
    border-right: solid 50px transparent;
}

html 

<mat-tab-group class="c-tab">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

должно выглядеть так: enter image description here

Ответы [ 3 ]

0 голосов
/ 30 ноября 2018

Обновление после css решит вашу проблему. 

.mat-tab-label {
  position: relative;
}
.mat-tab-header,
.mat-tab-label-container,
.mat-ripple {
  overflow: inherit !important;
}
.mat-ink-bar:after {
  content: "";
  position: absolute;
  top: 48px;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-top: solid 20px #673ab7;
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;
}

Оформление заказа stackblitz

0 голосов
/ 30 ноября 2018 
.c-tab .mat-ink-bar {
  position:relative
}

Попробуйте именно это ^^ ...

Теоретически это все, что вам нужно: updatet https://jsfiddle.net/Rakowu/e42wng0m/4/

0 голосов
/ 30 ноября 2018

Вам не хватает display:block для вашего ::after элемента.Поэтому свойства блока не применяются.Кроме того, вы растягиваете ширину ::after, чтобы соответствовать ее родителю, используя top, left, right и bottom.

. Позиционируйте либо вверху слева, либо внизу справа, но не одновременно.`

...