在Angular中,使用MatButtonToggle组件时,如果要居中显示MatIcon图标,可以按照以下步骤进行解决:
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [
MatButtonToggleModule,
MatIconModule
],
...
})
export class AppModule { }
check_circle
add_circle
remove_circle
.css
文件)中,使用以下CSS来居中显示MatIcon图标:.mat-button-toggle-label-content.mat-icon {
display: flex;
justify-content: center;
align-items: center;
}
这样,MatIcon图标就会在MatButtonToggle中居中显示了。
.ts
文件)中,添加一个方法来处理MatButtonToggle的change事件。你可以通过event对象的value属性获取选择的值,并根据需要执行相应的操作。onToggleChange(event: MatButtonToggleChange) {
console.log(event.value);
// 处理选择的值
}
这样,你就可以根据选择的值来执行相应的操作了。
希望以上解决方法能够帮助到你!