Реализация кнопки в угловом мат-табе - PullRequest
Новая
       23

Реализация кнопки в угловом мат-табе

0 голосов
/ 22 марта 2019

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

Я следую указаниям по угловым материалам: 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 голосов
/ 22 марта 2019

Вы можете изменить стиль метки-вкладки-метки ..

в style.css add (НЕ В КОМПОНЕНТЕ 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

...