离子4改变按钮的大小和颜色问题

Posted 2021-03-28

我使用以下代码允许我在单击按钮时更改按钮的颜色。它工作正常。但是当我尝试添加CSS来改变按钮的宽度和高度时。颜色变化有效，但按钮大小没有变化。这是我的代码：

html code 
<ion-content padding>
   <ion-row>
       <ion-col width-50 style="text-align: right" no-padding >
    <button ion-button full no-margin class="bsize" (click)="addEvent('b1');" [ngStyle]="{'background-color': buttonColorb1}">button 1</button>
</ion-col>
 <ion-col width-50 style="text-align: left" no-padding>
    <button ion-button full no-margin class="bsize" (click)="addEvent('b2');" [ngStyle]="{'background-color': buttonColorb2}">button 2</button>
  </ion-col>
  </ion-row>

</ion-content>

scss code :

.bsize {
   --width: 100px;
   --height: 40px;
}

ts code :

export class TestButtonPage implements OnInit {
buttonColorb1: string = '#D3D3D3'; //Default Color
buttonColorb2: string  = '#D3D3D3'; //Default Color
constructor() { }

addEvent(btn){
if (btn == "b1") {
   this.buttonColorb1 = '#add8e6'; //desired Color
   this.buttonColorb2  = '#D3D3D3'; //desired Color
}
else {
   this.buttonColorb1   = '#add8e6'; //desired Color
   this.buttonColorb2  = '#D3D3D3'; //desired Color
  }
}
ngOnInit() {
   this.buttonColorb1 = '#add8e6'; //desired Color
   this.buttonColorb2  = '#D3D3D3'; //desired Color
 }
 }

答案

使用下面的CSS，

.bsize {
  width: 100px;
  height: 40px;
}

StackBlitz Example