используйте кнопки мат, чтобы построить навигационную панель в угловых

Question

Я строю приложение в угловых.Как часть этого, я разрабатываю навигационную панель с использованием матовых кнопок.

<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 для click из mat-flat-button и использовать ngClass, чтобы добавить класс 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.Это не будет применяться, если используется таким образом.!important тоже не нужен.Вместо этого вы можете попробовать это.

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

Answer 2

На кнопках есть несколько событий, где вы можете изменить цвет.

• :focus изменит цвет после щелчка.
• :active изменит цвет при нажатии.
• :hover изменит цвет при наведении на кнопку.

Я думаю, что здесь вы ищете :focus.

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

Здесь вы можете найти демо.