Angular Material 切换按钮

Angular 指令 <mat-button-toggle> 用于创建带有 Material 样式和动画的切换或 开/关 按钮。 Mat-button-toggle 按钮配置为像单选按钮或复选框一样工作。它们是 <mat-button-toggle-group> 的一部分。

<mat-button-toggle> 是外观像按钮的开/关切换。这些切换可以配置为充当单选按钮或复选框。 虽然它们可以独立存在，但它们通常是 mat-button-toggle-group 的一部分。

app.component.html

app.component.ts

输出

独占选择与多重选择

默认情况下，mat-button-toggle-group 像单选按钮组一样工作 - 只能选择一个项目。 在此模式下，mat-button-toggle-group 的值将反映所选按钮的值，并且支持 ngModel。

添加多个属性允许多个项目被选中（复选框行为）。 在此模式下，不使用切换的值，mat-button-toggle-group 没有值，并且不支持 ngModel。

外观

mat-button-toggle-group 和 mat-button-toggle 的外观将遵循最新的 Material Design 指南。 如果您愿意，您可以使用外观输入切换回遵循先前 Material Design 规范的外观。 可以使用 MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS 注入令牌全局配置外观。

app.component.html

app.component.ts

app.component.css

输出

与 @angular/forms 一起使用

<mat-button-toggle-group> 与 @angular/forms 兼容，并支持 FormsModule 和 ReactiveFormsModule。

可访问性

按钮切换内部使用带有 aria-pressed 的原生按钮元素来传达它们切换的状态。 包围各个按钮的 button-toggle-group 应用 role="group" 来传达各个切换之间的关联。

对于仅包含图标的按钮切换，每个按钮切换都应通过 aria-label 或 aria-labelledby 给出有意义的标签。

对于按钮切换组，每个组都应通过 aria-label 或 aria-labelledby 给出有意义的标签。

导向

通过添加垂直属性，可以以垂直方向呈现按钮切换。

示例

以下是修改后的模块描述符 app.module.ts 的内容。

以下是修改后的 CSS 文件 app.component.css 的内容。

以下是修改后的 HTML 主机文件 app.component.html 的内容。

输出

说明

首先，我们使用 mat-button-toggle-group 创建了一个切换按钮组。

然后，我们使用 mat-button-toggle 将切换按钮添加到组中。