开关按钮 Button toggle

button-toggle 的 API

Angular Material button-toggle API 参考文档

import {MatButtonToggleModule} from '@angular/material/button-toggle';

排他性按钮开关组的行为类似于单选按钮组。

Exclusive selection button toggle group that behaves like a radio-button group.

选择器: mat-button-toggle-group
导出为: matButtonToggleGroup
属性
名称 描述
@Input()

appearance: MatButtonToggleAppearance

该组中所有按钮的外观。

The appearance for all the buttons in the group.

@Input()

disabled: boolean

是否禁用了多按钮开关组。

Whether multiple button toggle group is disabled.

@Input()

multiple: boolean

是否可以选择多个按钮开关。

Whether multiple button toggles can be selected.

@Input()

name: string

底层 input 元素的 name 属性。

name attribute for the underlying input element.

@Input()

value: any

开关组的值。

Value of the toggle group.

@Input()

vertical: boolean

开关组是否为垂直的。

Whether the toggle group is vertical.

@Output()

change: EventEmitter<MatButtonToggleChange>

当组的值发生变化时会发出本事件。

Event emitted when the group's value changes.

selected:

本组中选定的按钮开关。

Selected button toggles in the group.

开关组内部的单个按钮。

Single button inside of a toggle group.

选择器: mat-button-toggle
导出为: matButtonToggle
属性
名称 描述
@Input()

appearance: MatButtonToggleAppearance

此按钮的外观样式。

The appearance style of the button.

@Input('aria-label')

ariaLabel: string

附加在宿主元素上的 aria-label 属性。在大多数情况下,aria-labelledby 优先,所以可省略。

Attached to the aria-label attribute of the host element. In most cases, aria-labelledby will take precedence so this may be omitted.

@Input('aria-labelledby')

ariaLabelledby: string | null

用户可以指定 aria-labelledby 属性,它会被转发到 input 元素上

Users can specify the aria-labelledby attribute which will be forwarded to the input element

@Input()

checked: boolean

此按钮是否被勾选。

Whether the button is checked.

@Input()

disableRipple: boolean

Whether ripples are disabled.

@Input()

disabled: boolean

此按钮是否被禁用。

Whether the button is disabled.

@Input()

id: string

此按钮开关的唯一 ID。

The unique ID for this button toggle.

@Input()

name: string

HTML 的 'name' 属性用于对单选按钮进行分组以进行唯一选择。

HTML's 'name' attribute used to group radios for unique selection.

@Input()

value: any

MatButtonToggleGroup 读取它来指定自己的值。

MatButtonToggleGroup reads this to assign its own value.

@Output()

change: EventEmitter<MatButtonToggleChange>

本组的值发生变化时发出的事件。

Event emitted when the group value changes.

buttonId: string

button 元素的唯一 ID。

Unique ID for the underlying button element.

buttonToggleGroup: MatButtonToggleGroup

父开关组(排他选择)。可选。

The parent button toggle group (exclusive selection). Optional.

方法
focus

让此按钮获得焦点。

Focuses the button.

参数

Parameters

options?

FocusOptions

MatButtonToggle 发出的变更事件对象。

Change event object emitted by MatButtonToggle.

属性
名称 描述

source: MatButtonToggle

The MatButtonToggle that emits the event.

value: any

The value assigned to the MatButtonToggle.

表示按钮开关的默认选项,可用 MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS 注入令牌进行配置。

Represents the default options for the button toggle that can be configured using the MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS injection token.

属性
名称 描述

appearance: MatButtonToggleAppearance

已弃用
type ToggleType = 'checkbox' | 'radio';

按钮开关可能的外观样式。

Possible appearance styles for the button toggle.

type MatButtonToggleAppearance = 'legacy' | 'standard';

注入令牌,可以用来配置应用中所有按钮开关的默认选项。

Injection token that can be used to configure the default options for all button toggles within an app.

const MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS: InjectionToken<MatButtonToggleDefaultOptions>;

这个注入令牌可以用来引用 MatButtonToggleGroup 实例。它可以作为实际 MatButtonToggleGroup 类的备用令牌,使用实际类会导致无法优化不必要的类及其组件元数据。

Injection token that can be used to reference instances of MatButtonToggleGroup. It serves as alternative token to the actual MatButtonToggleGroup class which could cause unnecessary retention of the class and its component metadata.

const MAT_BUTTON_TOGGLE_GROUP: InjectionToken<MatButtonToggleGroup>;

Angular Material button-toggle-testing API 参考文档

import {MatButtonToggleHarness} from '@angular/material/button-toggle/testing';

在测试中与标准 mat-button-toggle 进行交互的测试工具。

Harness for interacting with a standard mat-button-toggle in tests.

方法
异步
blur

让此开关失去焦点。

Blurs the toggle.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
check

如果当前未勾选,就把按钮开关设置到已勾选状态;如果当前未勾选,就什么也不做。

Puts the button toggle in a checked state by toggling it if it's currently unchecked, or doing nothing if it is already checked.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
focus

让此开关获取焦点。

Focuses the toggle.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
getAppearance

获取此按钮开关正在使用的外观。

Gets the appearance that the button toggle is using.

返回值

Returns

Promise<MatButtonToggleAppearance>
异步
getAriaLabel

获取此按钮开关的 aria-label 的 Promise。

Gets a promise for the button toggle's aria-label.

返回值

Returns

Promise<string | null>
异步
getAriaLabelledby

获取此按钮开关的 aria-labelledby 的 Promise。

Gets a promise for the button toggles's aria-labelledby.

返回值

Returns

Promise<string | null>
异步
getName

获取此按钮开关名称的 Promise。

Gets a promise for the button toggle's name.

返回值

Returns

Promise<string | null>
异步
getText

获取此按钮开关文本的 Promise。

Gets a promise for the button toggle's text.

返回值

Returns

Promise<string>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>
异步
isChecked

获取一个布尔型 Promise,表明是否勾选了此按钮开关。

Gets a boolean promise indicating if the button toggle is checked.

返回值

Returns

Promise<boolean>
异步
isDisabled

获取一个布尔型 Promise,表明此按钮是否已禁用。

Gets a boolean promise indicating if the button toggle is disabled.

返回值

Returns

Promise<boolean>
异步
isFocused

此开关是否拥有焦点。

Whether the toggle is focused.

返回值

Returns

Promise<boolean>
异步
toggle

切换按钮开关的勾选状态。

Toggle the checked state of the buttons toggle.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
uncheck

如果当前已勾选,则把此按钮开关切换到未勾选状态;如果当前未勾选,就什么也不做。

Puts the button toggle in an unchecked state by toggling it if it's currently checked, or doing nothing if it's already unchecked.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

在测试中与标准 mat-button-toggle 进行交互的测试工具。

Harness for interacting with a standard mat-button-toggle in tests.

方法
异步
getAppearance

获取该组正在使用的外观。

Gets the appearance that the group is using.

返回值

Returns

Promise<MatButtonToggleAppearance>
异步
getToggles

获取组内部的按钮开关。

Gets the button toggles that are inside the group.

参数

Parameters

filter

ButtonToggleHarnessFilters = {}

(可选)应该包括哪些按钮的过滤器。

Optionally filters which toggles are included.

返回值

Returns

Promise<MatButtonToggleHarness[]>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>
异步
isDisabled

获取是否禁用了此按钮开关组。

Gets whether the button toggle group is disabled.

返回值

Returns

Promise<boolean>
异步
isVertical

获取按钮开关组是否垂直排列。

Gets whether the button toggle group is laid out vertically.

返回值

Returns

Promise<boolean>

可以用来过滤 MatButtonToggleHarness 实例列表的标准。

Criteria that can be used to filter a list of MatButtonToggleHarness instances.

属性
名称 描述

checked: boolean

只查找已勾选的实例。

Only find instances that are checked.

name: string | RegExp

只查找名字与指定值匹配的实例。

Only find instances whose name matches the given value.

text: string | RegExp

只查找文本与指定值匹配的实例。

Only find instances whose text matches the given value.

可以用来过滤 MatButtonToggleGroupHarness 实例列表的标准。

Criteria that can be used to filter a list of MatButtonToggleGroupHarness instances.