开关按钮 Button toggle

<mat-button-toggle> 是一个具有按钮外观的双态开关。 这些开关的行为可以配置得像单选按钮或检查框一样。虽然它们也可以独立使用，但一般会作为 mat-button-toggle-group 中的一部分。

<mat-button-toggle> are on/off toggles with the appearance of a button. These toggles can be configured to behave as either radio-buttons or checkboxes. While they can be standalone, they are typically part of a mat-button-toggle-group.

link 单选与多选

link Exclusive selection vs. multiple selection

默认情况下，mat-button-toggle-group 的表现很像单选按钮组 —— 只能选中一个元素。 在这种模式下，mat-button-toggle-group 的 value 表示当前选中的按钮，还支持 ngModel。

By default, mat-button-toggle-group acts like a radio-button group- only one item can be selected. In this mode, the value of the mat-button-toggle-group will reflect the value of the selected button and ngModel is supported.

添加 multiple 属性将会允许同时选中多个条目（就像检查框那样）。 在这种模式下，这些开关的值是没用的，mat-button-toggle-group 没有值，不支持 ngModel。

Adding the multiple attribute allows multiple items to be selected (checkbox behavior). In this mode the values of the toggles are not used, the mat-button-toggle-group does not have a value, and ngModel is not supported.

link 外观

link Appearance

默认情况下，mat-button-toggle-group 和 mat-button-toggle 的外观将遵循最新的 Material 设计准则。如果需要，也可以使用输入属性 appearance 切换回上一版 Material Design 规范的外观。可以使用 MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS 注入令牌来全局配置 appearance 。

By default, the appearance of mat-button-toggle-group and mat-button-toggle will follow the latest Material Design guidelines. If you want to, you can switch back to the appearance that was following the previous Material Design spec by using the appearance input. The appearance can be configured globally using the MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS injection token.

link Use with @angular/forms

<mat-button-toggle-group> is compatible with @angular/forms and supports both FormsModule and ReactiveFormsModule.

link 无障碍性

link Accessibility

这些按钮开关内部会使用带有 aria-pressed 的原生 button 元素来表达其切换状态。按钮开关组（button-toggle-group）会把带有 role="group" 的这些独立按钮都包裹起来，以表达这些独立开关之间的联系。

The button-toggles internally use native button elements with aria-pressed to convey their toggled state. The button-toggle-group surrounding the individual buttons applies role="group" to convey the association between the individual toggles.

对于只包含图标的按钮开关，每个按钮开关都应该通过 aria-label 或 aria-labelledby 给出一个有意义的标签。

For button toggles containing only icons, each button toggle should be given a meaningful label via aria-label or aria-labelledby.

对于按钮开关组，每个组都要通过 aria-label 或 aria-labelledby 给出一个有意义的标签。

For button toggle groups, each group should be given a meaningful label via aria-label or aria-labelledby.

link 方向

link Orientation

通过添加 vertical 属性，按钮开关组可以沿垂直方向渲染。

The button-toggles can be rendered in a vertical orientation by adding the vertical attribute.