Реализация кнопки в angular mat-tab

#angular #angular-material-6

#angular #угловой-материал-6

Вопрос:

Я хочу реализовать вкладки на основе кнопок, используя angular-material. Я попытался применить класс и другие материалы. Но это не работало и не могло найти способ.

Я следую руководству по angular-material:https://material.angular.io/components/tabs/examples

 <mat-tab-group>
  <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>

Есть ли способ разместить обычную кнопку для первой, второй и третьей вкладок?
Я хочу реализовать что-то вроде этого:https://imgur.com/0rb5d5f
Я ломаю голову уже более трех часов. Спасибо!

1. Опишите более конкретно, что не работает. У вас есть сообщения об ошибках? Поделитесь ими. Вы решили зависимости? Покажите нам код ваших компонентов.

2. Я пробовал применять разные стили, размещая классы. Это было напрасно. Я не смог найти способ размещения кнопки над вкладкой, в которой мне нужно сохранить функциональность mat-tabs здесь. Есть ли способ добиться этого?

Ответ №1:

Вы можете изменить стиль метки mat-tab-label..

добавить в style.css (НЕ В CSS-КОМПОНЕНТЕ):

 .mat-tab-label
{
//personal css style
}

(ПРИМЕР)

 .mat-tab-label{
 background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;

}

https://material.angular.io/guide/customizing-component-styles

1. Спасибо. Это сработало. Я писал свой стиль внутри css-файла компонента, и поэтому он не работал!

2. нет проблем :), если вы хотите изменить стиль компонентов material, вам нужно добавить или изменить это в style.css, прежде чем создавать тему angular material.