ionic-framework - ionic 4 更改按钮的大小和颜色问题
问题描述
我使用以下代码允许我在单击按钮时更改按钮的颜色。它工作正常。但是当我尝试添加 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
}
}
解决方案
推荐阅读
- javascript - 获取数组内数组中的值
- angular - 如何在 ngFor 中做动态表达?
- swift - 如果使用 SwiftDate pod,如何将时间设置为与我的区域相同?
- mysql - 在 ubuntu 和 python 中对 foodmart_mysql.sql 文件执行查询
- mysql - MariaDB 优化和转储超过 1gb 的数据库和每分钟 1500 次以上的更新操作
- json - JSON 对象异常
- python - 如何遍历从网上获取的 json 数据?
- ssis - 如何删除部署为 SQL Server 代理作业步骤的 SSIS 包中未使用的连接?
- c# - 如何在 lightgallery 中播放 Microsoft Azure 视频(使用 azure 媒体播放器)?
- amazon-web-services - Amazon S3 作为 CDN 从我的服务器复制图像