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

Question

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

<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

您必须在mat-flat-button 的click 上设置一个变量，例如selectedTab，并使用ngClass 添加基于active 的active 类。

<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 之间不应有空格。如果这样使用，它将不适用。 !important 也不需要。相反，你可以试试这个。

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

Answer 2

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

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

我想你在这里寻找:focus。

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

Here你可以找到演示。