在 angular mat-tab 中实现按钮

Question

我想使用 angular-material 实现基于按钮的选项卡。我尝试应用 class 和其他东西。但是，它不起作用，找不到方法。

我正在关注 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 我挠头了三个多小时。谢谢！

Answer 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

在 angular mat-tab 中实现按钮

Implementing button in angular mat-tab

angular

angular-material-6