Question

我正在构建角度应用程序。作为其中的一部分，我正在使用Mat按钮开发导航栏。

<div flexLayout="row">
  <button class="flat_button" mat-flat-button>B2-L1</button>
  <button mat-flat-button>B2-L3</button>
  <button mat-flat-button>B2-L3</button>
  <button mat-flat-button>B2-L4</button>
</div>

.mat-flat-button {
  background-color: grey;
  border-radius: 0 px !important;
}

.mat-button {
  border-radius: 0 px !important;
}

我已经更改了按钮的背景颜色，现在，如果我选择一个按钮，则希望它的颜色为白色（无论我选择/单击的按钮是什么，其余按钮应该是灰色的）。我已经尝试了几件事，但无法做到。有人可以帮我弄这个吗？谢谢。

Answer 1

您将必须设置一个变量，在selectedTab的{{1}}上说click，然后使用mat-flat-button来基于{添加一个ngClass类{1}}。

active

selectedTab类看起来像这样。

<div flexLayout="row">
    <button (click)="selectedTab = 1" [ngClass]="{'active': selectedTab === 1}" mat-flat-button>B2-L1</button>
    <button (click)="selectedTab = 2" [ngClass]="{'active': selectedTab === 2}" mat-flat-button>B2-L3</button>
    <button (click)="selectedTab = 3" [ngClass]="{'active': selectedTab === 3}" mat-flat-button>B2-L3</button>
    <button (click)="selectedTab = 4" [ngClass]="{'active': selectedTab === 4}" mat-flat-button>B2-L4</button>
</div>

注意：我不确定代码中是否有错字，但active和.mat-flat-button.active { background-color: white; }之间应该没有空格。如果那样使用，它将不适用。也不需要0。相反，您可以尝试一下。

px

Answer 2

按钮上有多个事件可以更改颜色。

:focus将在单击后更改颜色。
:active将在单击时更改颜色。
:hover会在鼠标悬停在按钮上时改变颜色。

我认为您正在寻找:focus。

.mat-flat-button:focus {
    background-color: white !important;
}

Here，您可以找到一个演示。

使用垫子按钮以角度构建导航栏

2 个答案: