时间戳

首页 > 解决方案 > 如何使用 Angular 材料中的按钮创建选择

angular - 如何使用 Angular 材料中的按钮创建选择

问题描述

我有一个使用 googlemap 的页面，并在地图上放置了一些按钮，看起来像这样以供设计参考。

这是一个设计示例 设计样本

我想要的是让这些按钮像一个单选按钮一样，这意味着如果用户点击一个按钮，我想改变背景颜色的外观。做这个的最好方式是什么 ？有没有办法修改材料选择，或者我需要通过 CSS 执行此操作并根据点击更改图像？

标签： angularangular-material

解决方案

由于没有明确的解决方案，我实际上只是使用基本的角材料和按钮来完成。在我的 HTML 中，我使用了以下代码

<button mat-mini-fab [ngClass]="[bntStyle1]"  (click)="changeButton(1)">
  <mat-icon style="font-size: 24px" fontSet="fa" fontIcon="fa-draw-polygon"></mat icon>
</button>
<button mat-mini-fab [ngClass]="[bntStyle2]" (click)="changeButton(2)">
  <mat-icon>search</mat-icon>
</button>
<button mat-mini-fab [ngClass]="[bntStyle3]"  (click)="changeButton(3)">
  <mat-icon>search</mat-icon>
</button>
<button mat-mini-fab [ngClass]="[bntStyle4]"  (click)="changeButton(4)">
  <mat-icon>search</mat-icon>
</button>

然后在我的comonent中，我有一个名为change button的函数，它将根据单击的按钮设置样式。同样在 ngOnInit 上，我在第一次单击事件之前将它们设置为相同。我确信我可以清理它，但现在它可以完成工作并且就像一个选项/选择。

ngOnInit() {
this. bntStyle1 = 'btn-default';
this. bntStyle2 = 'btn-default';
this. bntStyle3 = 'btn-default';
this. bntStyle4 = 'btn-default';
}

changeButton(bttn) {
if (bttn === 1 ) {
this.bntStyle1 = 'btn-change';
this.bntStyle2 = 'btn-default';
this.bntStyle3 = 'btn-default';
this.bntStyle4 = 'btn-default';
this.drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
}
if (bttn === 2 ) {
this.bntStyle1 = 'btn-default';
this.bntStyle2 = 'btn-change';
this.bntStyle3 = 'btn-default';
this.bntStyle4 = 'btn-default';
}

if (bttn === 3 ) {
this.bntStyle1 = 'btn-default';
this.bntStyle2 = 'btn-default';
this.bntStyle3 = 'btn-change';
this.bntStyle4 = 'btn-default';
}
if (bttn === 4 ) {
this.bntStyle1 = 'btn-default';
this.bntStyle2 = 'btn-default';
this.bntStyle3 = 'btn-default';
this.bntStyle4 = 'btn-change';
}


 console.log('We hit button change');

}

推荐阅读