嗨,我正在开发一个角度应用程序。我想创建选项卡,单击每个调用不同的功能。我正在使用垫子按钮。我的代码
<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; }
但是当单击一个按钮时,这会更改所有按钮的颜色。如何更改仅被单击的一个按钮的颜色,其余按钮都保持相同的颜色。
PS:仅当我在CSS中评论背景色时,颜色更改才起作用。
答案 0 :(得分:1)
根据您的要求,首先需要知道哪个选项卡处于活动状态,然后仅对该选项卡应用颜色,为此,您需要具有另一个变量 currentActiveTab 。 每当用户使用change方法单击另一个选项卡时,都需要更改currentActiveTab值,这将通过将tab索引作为参数传递给该方法来激活选项卡的颜色。
<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更改方法中设置巴勒斯坦
change(index) {
this.currentActiveTab = index;
}
答案 1 :(得分:1)
您不能在angular中应用如上的类(mat的颜色属性),它应按如下方式使用
<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;
}
答案 2 :(得分:1)
您可以将按钮放在自己的组件中。我用一个简单的按钮做了一个快速演示。我确信它与角形材料的工作原理相似。
一个主要优点是,这也将功能分开,而不是使组件类可以完成所有工作。
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
注意:就我个人而言,我不会基于按钮单击来给按钮着色,而是会更改按钮类以指示该按钮调用的功能的可用性。因此,您将拥有反映按钮状态的类,如不可用,正在处理,可用,已处理等。这些类将使用CSS设置样式。
答案 3 :(得分:0)
使用deep
.mat-flat-button /deep/ .mat-button-focus-overlay {
background-color: grey;
border-radius: 0 px !important;;
}
这将覆盖默认样式
答案 4 :(得分:0)
我想出了一种方法
.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;;
}
谢谢大家的支持。
答案 5 :(得分:0)
自从您提到您专门使用导航以来,我为您提供了另一种解决方案;您可以在激活路线时添加一个名为active
的类。这是通过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;
}