[英]change colour of a mat button when clicked in angular
您好我正在開發一個 angular 應用程序。 我想創建選項卡,單擊每個調用不同的 function。 我正在使用墊子按鈕。 我的代碼
<div flexLayout="row">
<button mat-flat-button [color]="this.paletteColour" (click)="change()">B2-L1</button>
<button mat-flat-button [color]="this.paletteColour" (click)="change()">B2-L3</button>
<button mat-flat-button [color]="this.paletteColour" (click)="change()">B2-L3</button>
<button mat-flat-button [color]="this.paletteColour" (click)="change()">B2-L4</button>
</div>
.ts 文件
paletteColour
change() {
this.paletteColour = 'warn';
}
.css 文件
.mat-flat-button {
background-color: grey;
border-radius: 0 px !important;;
}
.mat-button, .mat-flat-button, .mat-icon-button, .mat-stroked-button { border-radius: 0px; }
但這會在單擊一個按鈕時改變所有按鈕的顏色。 如何更改僅單擊一個按鈕的顏色,並且 rest 都保持相同的顏色。
PS:只有當我在 css 中評論背景顏色時,顏色變化才有效。
根據您的要求,首先您需要知道哪個選項卡處於活動狀態,然后僅為該選項卡應用顏色,為此您需要有另一個變量currentActiveTab 。 每當用戶使用 change 方法單擊不同的選項卡時,您都需要更改 currentActiveTab 值,這將通過將選項卡索引作為參數傳遞給該方法來激活選項卡的顏色。
<div flexLayout="row">
<button mat-flat-button [color]="this.crrentActiveTab == 1 ? this.paletteColour : null" (click)="change(1)">B2-L1</button>
<button mat-flat-button [color]="this.crrentActiveTab == 2 ? this.paletteColour : null" (click)="change(2)">B2-L3</button>
<button mat-flat-button [color]="this.crrentActiveTab == 3 ? this.paletteColour : null" (click)="change(3)">B2-L3</button>
<button mat-flat-button [color]="this.crrentActiveTab == 4 ? this.paletteColour : null" (click)="change(4)">B2-L4</button>
</div>
在這里,您將在 ts 更改方法中設置 palete
change(index) {
this.currentActiveTab = index;
}
你不能像上面一樣在 angular 中應用類(墊子的顏色屬性)。它應該像下面這樣使用
<div flexLayout="row">
<button mat-flat-button [attr.color]="this.selected == 1 ? 'warn' : 'primary'" (click)="change(1)">B2-L1</button>
<button mat-flat-button [attr.color]="this.selected == 2 ? 'warn' : 'primary'" (click)="change(2)">B2-L3</button>
<button mat-flat-button [attr.color]="this.selected == 3 ? 'warn' : 'primary'" (click)="change(3)">B2-L3</button>
<button mat-flat-button [attr.color]="this.selected == 4 ? 'warn' : 'primary'" (click)="change(4)">B2-L4</button>
</div>
change(n) {
this.paletteColour = 'warn';
this.selected=n;
}
您可以將按鈕放在它們自己的組件中。 我用一個簡單的按鈕做了一個快速演示。 我確信它與 angular 材料類似。
一個主要優點是這也分離了功能,而不是制作一個可以完成所有工作的組件 class。
import { Component } from '@angular/core';
@Component({
selector: 'my-button',
template: '<button [style.background]="this.color" (click)="toggleColor()">I am button #1</button>'
})
export class MyButtonComponent {
color = 'red';
constructor(){}
toggleColor(){
if( this.color === 'red' )
this.color = 'blue';
else
this.color = 'red';
}
}
玩弄它: https://stackblitz.com/edit/angular-y8zf5a
注意:我個人不會根據按鈕單擊為按鈕着色,而是更改按鈕 class 以指示按鈕調用的 function 的可用性。 因此,您將擁有反映按鈕的 state 的類,如不可用、正在處理、可用、已處理等。 這些類將使用 css 進行樣式設置。
使用deep
.mat-flat-button /deep/ .mat-button-focus-overlay {
background-color: grey;
border-radius: 0 px !important;;
}
這將覆蓋默認樣式
我想出了一個辦法
.html
<div flexLayout="row">
<div flexLayout="row">
<button mat-flat-button [ngClass]="this.selected == 1 ? 'tab_selected' : 'tab_unselected'" (click)="change(1)">B2-L1</button>
<button mat-flat-button [ngClass]="this.selected == 2 ? 'tab_selected' : 'tab_unselected'" (click)="change(2)">B2-L3</button>
<button mat-flat-button [ngClass]="this.selected == 3 ? 'tab_selected' : 'tab_unselected'" (click)="change(3)">B2-L3</button>
<button mat-flat-button [ngClass]="this.selected == 4 ? 'tab_selected' : 'tab_unselected'" (click)="change(4)">B2-L4</button>
</div>
</div>
.ts
selected
change(n) {
this.paletteColour = 'warn';
this.selected=n;
console.log(this.selected);
}
.css
.tab_selected {
background-color: grey;
border-radius: 0 px !important;;
}
.mat-button {
border-radius: 0 px !important;;
}
謝謝大家的支持。
由於您提到您專門使用導航,因此我為您提供了另一種解決方案; 當路由處於活動狀態時,您可以使 angular 添加名為active
的 class 。 這是通過routerLinkActive="active"
實現的。
Stackblitz: https://stackblitz.com/edit/angular-ijn9bz
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router'
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { HomeComponent } from './home/home.component';
import { Page2Component } from './page2/page2.component';
import { Page3Component } from './page3/page3.component';
@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot([
{ path: 'home', component: HomeComponent },
{ path: 'page2', component: Page2Component },
{ path: 'page3', component: Page3Component }
])
],
declarations: [ AppComponent, HelloComponent, HomeComponent, Page2Component, Page3Component ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
app.component.html
<div flexLayout="row">
<button [routerLink]="['/home']" routerLinkActive="active">B2-L1</button>
<button [routerLink]="['/page2']" routerLinkActive="active">B2-L3</button>
<button [routerLink]="['/page3']" routerLinkActive="active">B2-L3</button>
</div>
<router-outlet></router-outlet>
app.component.css
.active{
background: yellow;
}
Ver 簡單的解決方案如下所示:-
只需使用routeLinkActive='active'
並在名為 active 的組件 css 中設置 class。
<button mat-raised-button color="primary" *appHasRole="'admin'" routerLink="/admin" routerLinkActive="active" [routerLinkActiveOptions]={exact:true} >Home </button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.