Angular Material 复选框

<mat-checkbox> 用作增强的复选框，具有内容设计样式和动画功能。它提供了与基本 <input type = "checkbox"> 相同的功能，并增强了样式和动画的内容设计。

复选框标签作为 <mat-checkbox> 元素的内容提供。通过在复选框之前或之后将标签状态属性设置为“之前”或“之后”来发布品牌。如果您不希望标签显示在复选框旁边，可以使用 aria-label 或 aria-label 指定合适的标签。

与 @angular/forms 一起使用

<mat-checkbox> 与 @ angular / forms 兼容，并支持 FormsModule 和 ReactiveFormsMinule。

中间状态

<mat-checkbox> 支持不确定状态 <input type = "checkbox">。尽管复选框的不确定属性是正确的，但它将呈现为未确定状态，而与选中的值无关。

单击操作配置

当用户单击 matte-checkbox 时，默认行为会切换选中的值并将不确定值设置为 False。它提供了与本机 <input type = "checkbox"> 类似的功能，并增强了 <mat- <mat-checkbox> 材料设计样式和动画。

可能的值是

noop

不要更改不确定值。开发人员有权实施自定义单击操作。

check

忽略不确定值并切换复选框的选中值。如果复选框处于不确定状态，则复选框将显示为选中值的不确定复选框。

check-indeterminate

当用户单击 mat-checkbox 时，将不确定值设置为 False。

主题化

<mat-checkbox> 的颜色将使用 color 属性更改。默认情况下，复选框使用主题的强调色。它可以调整为“主要”或“警告”。

可访问性

<mat-checkbox> 使用内部 <input type = "checkbox"> 来提供可访问的体验。它接收内部复选框焦点，并自动标记 <mat-checkbox> 元素的文本内容。

创建 Angular 应用程序

按照以下步骤更新 Angular 应用程序

1. 创建一个包含内容应用程序的项目。
2. 修改 module.ts、app.component.ts、app.component.css 和 app.component.html。 保持其余文件不变。
3. 编译并运行应用程序。

让我们看一个示例。

该文件是一个修改后的模块描述符。

app.module.ts

app.component.html

app.component.css

app.component.ts

输出

以前，我们使用 mat-checkboxes 创建了三个复选框，并使用 ngModel 将它们与变量关联起来。之后，我们创建了另一个复选框，并使用 .ts 文件中的变量关联了它的各种属性。

让我们看另一个创建复选框的例子。

app.component.html

app.module.ts

app.component.css

输出

当我们单击复选框时，这些框会填充颜色，并且一个小勾号会出现在上面。