滑块开关 Slide toggle

slide-toggle 的 API

Angular Material slide-toggle API 参考文档

import {MatSlideToggleModule} from '@angular/material/slide-toggle';

表示一个滑动“切换”开关,它可以在打开和关闭之间移动。

Represents a slidable "switch" toggle that can be moved between on and off.

选择器: mat-slide-toggle
导出为: matSlideToggle
属性
名称 描述
@Input('aria-label')

ariaLabel: string | null

用于在底层的 input 元素上设置 aria-label 属性。

Used to set the aria-label attribute on the underlying input element.

@Input('aria-labelledby')

ariaLabelledby: string | null

用于在底层的 input 元素上设置 aria-labelledby 属性。

Used to set the aria-labelledby attribute on the underlying input element.

@Input()

checked: boolean

是否勾选了滑块开关元素。

Whether the slide-toggle element is checked or not.

@Input()

color: ThemePalette

Theme color palette for the component.

@Input()

disableRipple: boolean

Whether ripples are disabled.

@Input()

disabled: boolean

Whether the component is disabled.

@Input()

id: string

滑块开关输入组件的唯一 id。如果没有提供,它就会自动生成。

A unique id for the slide-toggle input. If none is supplied, it will be auto-generated.

@Input()

labelPosition: 'before' | 'after'

标签应出现在滑块开关之后还是之前。默认为 'after'。

Whether the label should appear after or before the slide-toggle. Defaults to 'after'.

@Input()

name: string | null

如果存在,name 值就会被应用到输入元素中。

Name value will be applied to the input element if present.

@Input()

required: boolean

滑块开关是否为必填项。

Whether the slide-toggle is required.

@Output()

change: EventEmitter<MatSlideToggleChange>

每当滑块开关的值发生变化时,都会派发一个事件。

An event will be dispatched each time the slide-toggle changes its value.

@Output()

toggleChange: EventEmitter<void>

每次切换滑块开关时,都会派发一个事件。当用户切换滑块开关时,就会发出此事件,但这并不意味着滑块开关的值已经改变。

An event will be dispatched each time the slide-toggle input is toggled. This event is always emitted when the user toggles the slide toggle, but this does not mean the slide toggle's value has changed.

defaultColor: ThemePalette | undefined

Default color to fall back to if no value is set.

defaultTabIndex: number

Tabindex to which to fall back to if no value is set.

defaults: MatSlideToggleDefaultOptions

inputId: string

返回隐藏的 input 元素的唯一 id。

Returns the unique id for the visual hidden input.

方法
focus

让此滑块开关获得焦点。

Focuses the slide-toggle.

参数

Parameters

options?

FocusOptions

origin?

FocusOrigin
toggle

切换滑块开关的勾选状态。

Toggles the checked state of the slide-toggle.

Material 滑块开关组件的验证器,在模板驱动表单中具有 required 属性。 默认的验证器需要表单控件确保其值不是 undefined,但是这对于永远是已定义值的滑块开关是不合适的。

Validator for Material slide-toggle components with the required attribute in a template-driven form. The default validator for required form controls asserts that the control value is not undefined but that is not appropriate for a slide-toggle where the value is always defined.

当检查时,滑块开关表单控件的必填项验证总是有效的。

Required slide-toggle form controls are valid when checked.

选择器: mat-slide-toggle[required][formControlName] mat-slide-toggle[required][formControl] mat-slide-toggle[required][ngModel]
属性
名称 描述

required: boolean | string

方法
registerOnValidatorChange

参数

Parameters

fn

() => void
validate

参数

Parameters

control

AbstractControl

返回值

Returns

ValidationErrors | null

修改 MatSlideToggle 发出的事件对象。

Change event object emitted by a MatSlideToggle.

属性
名称 描述

checked: boolean

The new checked value of the MatSlideToggle.

source: MatSlideToggle

The source MatSlideToggle of the event.

默认的 mat-slide-toggle 选项,可以被改写。

Default mat-slide-toggle options that can be overridden.

属性
名称 描述

disableToggleValue: boolean

切换操作是否会触发滑块开关中的值更改。

Whether toggle action triggers value changes in slide toggle.

这个注入令牌用来改写 mat-slide-toggle 的默认选项。

Injection token to be used to override the default options for mat-slide-toggle.

const MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS: InjectionToken<MatSlideToggleDefaultOptions>;
const MAT_SLIDE_TOGGLE_REQUIRED_VALIDATOR: Provider;

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

import {MatSlideToggleHarness} from '@angular/material/slide-toggle/testing';

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

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

方法
异步
blur

Blurs the slide-toggle.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
check

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

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
focus

让此滑块开关获得焦点。

Focuses the slide-toggle.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
getAriaLabel

Gets the slide-toggle's aria-label.

返回值

Returns

Promise<string | null>
异步
getAriaLabelledby

Gets the slide-toggle's aria-labelledby.

返回值

Returns

Promise<string | null>
异步
getLabelText

Gets the slide-toggle's label text.

返回值

Returns

Promise<string>
异步
getName

Gets the slide-toggle's name.

返回值

Returns

Promise<string | null>
异步
host

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

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

返回值

Returns

Promise<TestElement>
异步
isChecked

Whether the slide-toggle is checked.

返回值

Returns

Promise<boolean>
异步
isDisabled

Whether the slide-toggle is disabled.

返回值

Returns

Promise<boolean>
异步
isFocused

Whether the slide-toggle is focused.

返回值

Returns

Promise<boolean>
异步
isRequired

滑块开关是否为必填项。

Whether the slide-toggle is required.

返回值

Returns

Promise<boolean>
异步
isValid

Whether the slide-toggle is valid.

返回值

Returns

Promise<boolean>
异步
toggle

Toggle the checked state of the slide-toggle.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
uncheck

Puts the slide-toggle in an unchecked state by toggling it if it is currently checked, or doing nothing if it is already unchecked.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

A set of criteria that can be used to filter a list of MatSlideToggleHarness instances.

属性
名称 描述

label: string | RegExp

只查找标签与指定值匹配的实例。

Only find instances whose label matches the given value.

name: string

Only find instances whose name is the given value.