Angular Material

Angular Material button-toggle API 参考文档

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

指令

`MatButtonToggleGroup`

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

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.

`MatButtonToggle`

开关组内部的单个按钮。

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

focus
让此按钮获得焦点。 Focuses the button.
options? `FocusOptions`

让此按钮获得焦点。

Focuses the button.

参数

Parameters

options?

FocusOptions

类

`MatButtonToggleChange`

MatButtonToggle 发出的变更事件对象。

Change event object emitted by MatButtonToggle.

属性

名称	描述
`source: MatButtonToggle`	The MatButtonToggle that emits the event.
`value: any`	The value assigned to the MatButtonToggle.

接口

`MatButtonToggleDefaultOptions`

表示按钮开关的默认选项，可用 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`

类型别名

`ToggleType`

已弃用

type ToggleType = 'checkbox' | 'radio';

`MatButtonToggleAppearance`

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

Possible appearance styles for the button toggle.

type MatButtonToggleAppearance = 'legacy' | 'standard';

常量

`MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS`

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

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>;

`MAT_BUTTON_TOGGLE_GROUP`

这个注入令牌可以用来引用 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';

类

`MatButtonToggleHarness` extends ComponentHarness

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

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

方法

异步 blur
让此开关失去焦点。 Blurs the toggle.
`Promise<void>`	Promise that resolves when the action completes.

异步

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.
`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.
`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.
`Promise<MatButtonToggleAppearance>`

异步

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.
`Promise<string \| null>`

异步

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.
`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.
`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.
`Promise<string>`

异步

getText

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

Gets a promise for the button toggle's text.

返回值

Returns

Promise<string>

异步 host
获取一个代表该组件宿主元素的 `TestElement` 型 `Promise`。 Gets a `Promise` for the `TestElement` representing the host element of the component.
`Promise<TestElement>`

异步

host

获取一个代表该组件宿主元素的 TestElement 型 Promise。

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.
`Promise<boolean>`

异步

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.
`Promise<boolean>`

异步

isDisabled

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

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

返回值

Returns

Promise<boolean>

异步 isFocused
此开关是否拥有焦点。 Whether the toggle is focused.
`Promise<boolean>`

异步

isFocused

此开关是否拥有焦点。

Whether the toggle is focused.

返回值

Returns

Promise<boolean>

异步 toggle
切换按钮开关的勾选状态。 Toggle the checked state of the buttons toggle.
`Promise<void>`	Promise that resolves when the action completes.

异步

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.
`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.

`MatButtonToggleGroupHarness` extends ComponentHarness

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

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

方法

异步 getAppearance
获取该组正在使用的外观。 Gets the appearance that the group is using.
`Promise<MatButtonToggleAppearance>`

异步

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
获取一个代表该组件宿主元素的 `TestElement` 型 `Promise`。 Gets a `Promise` for the `TestElement` representing the host element of the component.
`Promise<TestElement>`

异步

host

获取一个代表该组件宿主元素的 TestElement 型 Promise。

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.
`Promise<boolean>`

异步

isDisabled

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

Gets whether the button toggle group is disabled.

返回值

Returns

Promise<boolean>

异步 isVertical
获取按钮开关组是否垂直排列。 Gets whether the button toggle group is laid out vertically.
`Promise<boolean>`

异步

isVertical

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

Gets whether the button toggle group is laid out vertically.

返回值

Returns

Promise<boolean>

接口

`ButtonToggleHarnessFilters`

可以用来过滤 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.

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.

`ButtonToggleGroupHarnessFilters`

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

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

开关按钮 API 目录

Testing

Angular Material button-toggle API 参考文档

link 指令

link MatButtonToggleGroup

属性

link MatButtonToggle

属性

方法

link 类

link MatButtonToggleChange

属性

link 接口

link MatButtonToggleDefaultOptions

属性

link 类型别名

link ToggleType

link MatButtonToggleAppearance

link 常量

link MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS

link MAT_BUTTON_TOGGLE_GROUP

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

link 类

link MatButtonToggleHarness extends ComponentHarness

方法

link MatButtonToggleGroupHarness extends ComponentHarness

方法

link 接口

link ButtonToggleHarnessFilters

属性

link ButtonToggleGroupHarnessFilters

指令

`MatButtonToggleGroup`

`MatButtonToggle`

类

`MatButtonToggleChange`

接口

`MatButtonToggleDefaultOptions`

类型别名

`ToggleType`

`MatButtonToggleAppearance`

常量

`MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS`

`MAT_BUTTON_TOGGLE_GROUP`

类

`MatButtonToggleHarness` extends ComponentHarness

`MatButtonToggleGroupHarness` extends ComponentHarness

接口

`ButtonToggleHarnessFilters`

`ButtonToggleGroupHarnessFilters`