Блог

Главная - Вопросы по программированию - Настройка углового мата-вкладки-метки

Настройка углового мата-вкладки-метки

#html #css #angular #angular-material

#HTML #css #угловой #угловой-материал

Вопрос:

Я хочу удалить серую линию под метками мат-вкладки. Как мне это сделать?

Смотрите образец, обведенный красными чернилами

Комментарии:

1. Это вопрос некоторого CSS. Что вы уже пробовали?

2. Вы используете либо AngularJS, либо Angular. Пожалуйста, отмечайте только соответствующую версию. Это очень разные фреймворки.

Ответ №1:

Улучшая ответ @isherwood, на самом деле вам нужно поместить .css в файл styles.scss (*)

 .mat-tab-header {
    border-bottom: none;
}

Это приведет к тому, что все ваши mat-tab-header получат this .css, чтобы избежать этого, вы можете заменить стиль before на

 .custom .mat-tab-header {
    border-bottom: none;
}

И измените .html, добавив класс

 <!--see you indicate class="custom" in mat-tab-group-->
<mat-tab-group class="custom">
  <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>

(*) вы также можете использовать ViewEncapsulation.Нет, но это делает все .css в вашем компоненте применяется ко всем приложениям

Ответ №2:

Стиль по умолчанию в демо выглядит следующим образом:

 .mat-tab-header, .mat-tab-nav-bar {
    border-bottom: 1px solid rgba(0,0,0,.12);
}

Вам нужно будет реализовать CSS либо на уровне приложения, либо на уровне компонента следующим образом:

 .mat-tab-header {
    border-bottom: none;
}