Angular Material slider API 参考文档
import {MatSliderModule} from '@angular/material/slider';
MatSlider
允许用户通过移动滑杆来从一系列值中进行选择。它的行为类似于原生的 <input type="range"> 元素。
Allows users to select from a range of values by moving the slider thumb. It is similar in
behavior to the native <input type="range"> element.
属性
| 名称 | 描述 |
|---|---|
@Input()
|
Theme color palette for the component. |
@Input()
|
Whether the component is disabled. |
@Input()
|
在滑块的标签上显示值之前用来格式化该值的函数。可以用来格式化非常大的数字，以便让它们适配滑杆。 Function that will be used to format the value before it is displayed in the thumb label. Can be used to format very large number in order for them to fit into the slider thumb. |
@Input()
|
滑杆是否反转了。 Whether the slider is inverted. |
@Input()
|
滑杆所具有的最大值。 The maximum value that the slider can have. |
@Input()
|
滑杆所具有的最小值。 The minimum value that the slider can have. |
@Input()
|
滑块处的值。 The values at which the thumb will snap. |
@Input()
|
是否要显示这个滑块标签。 Whether or not to show the thumb label. |
@Input()
|
多远才显示一个刻度。相对于步长来说，刻度总是会出现在一个步长上。例如：刻度的间隔为 4，步长为 3，则每 4 步（每 12 个值）就会画一个刻度。 How often to show ticks. Relative to the step so that a tick always appears on a step. Ex: Tick interval of 4 with a step of 3 will draw a tick every 4 steps (every 12 values). |
@Input()
|
滑杆的值。 Value of the slider. |
@Input()
|
对应滑杆值的文本。主要用于改善无障碍性。 Text corresponding to the slider's value. Used primarily for improved accessibility. |
@Input()
|
滑杆是否垂直。 Whether the slider is vertical. |
@Output()
|
滑杆值发生变化时发出的事件。 Event emitted when the slider value has changed. |
@Output()
|
滑杆上的滑块移动时发出的事件。 Event emitted when the slider thumb moves. |
|
Default color to fall back to if no value is set. |
|
Tabindex to which to fall back to if no value is set. |
|
供显示用的值。 The value to be used for display purposes. |
|
通过 ControlValueAccessor 上的 registerOnTouch 注册的 onTouch 函数。 onTouch function registered via registerOnTouch (ControlValueAccessor). |
|
与滑杆值一致的百分比值。 The percentage of the slider that coincides with the value. |
方法
| blur | |
|---|---|
|
让宿主元素失去焦点 blur the host element |
| focus | |
|---|---|
|
把焦点设置到宿主元素上 set focus to the host element |
|
参数 Parameters |
|
|
options? FocusOptions
|
|
MatSliderChange
MatSlider 组件发出的一个简单的 change 事件。
A simple change event emitted by the MatSlider component.
属性
| 名称 | 描述 |
|---|---|
|
发生改变的 MatSlider。 The MatSlider that changed. |
|
源滑杆的新值。 The new value of the source slider. |
Angular Material slider-testing API 参考文档
import {MatSliderHarness} from '@angular/material/slider/testing';
MatSliderHarness
extends
ComponentHarness
在测试中用来与标准 mat-slider 进行交互的测试工具。
Harness for interacting with a standard mat-slider in tests.
方法
异步
blur
|
|
|---|---|
|
Blurs the slider. |
|
返回值 Returns |
|
Promise<void>
|
Promise that resolves when the action completes. |
异步
focus
|
|
|---|---|
|
Focuses the slider. |
|
返回值 Returns |
|
Promise<void>
|
Promise that resolves when the action completes. |
异步
getDisplayValue
|
|
|---|---|
|
Gets the current display value of the slider. Returns a null promise if the thumb label is disabled. |
|
返回值 Returns |
|
Promise<string | null>
|
|
异步
getId
|
|
|---|---|
|
Gets the slider's id. |
|
返回值 Returns |
|
Promise<string | null>
|
|
异步
getMaxValue
|
|
|---|---|
|
Gets the maximum value of the slider. |
|
返回值 Returns |
|
Promise<number>
|
|
异步
getMinValue
|
|
|---|---|
|
Gets the minimum value of the slider. |
|
返回值 Returns |
|
Promise<number>
|
|
异步
getOrientation
|
|
|---|---|
|
Gets the orientation of the slider. |
|
返回值 Returns |
|
Promise<'horizontal' | 'vertical'>
|
|
异步
getPercentage
|
|
|---|---|
|
Gets the current percentage value of the slider. |
|
返回值 Returns |
|
Promise<number>
|
|
异步
getValue
|
|
|---|---|
|
Gets the current value of the slider. |
|
返回值 Returns |
|
Promise<number>
|
|
异步
host
|
|
|---|---|
|
获取一个代表该组件宿主元素的 Gets a |
|
返回值 Returns |
|
Promise<TestElement>
|
|
异步
isDisabled
|
|
|---|---|
|
Whether the slider is disabled. |
|
返回值 Returns |
|
Promise<boolean>
|
|
异步
isFocused
|
|
|---|---|
|
Whether the slider is focused. |
|
返回值 Returns |
|
Promise<boolean>
|
|
异步
setValue
|
|
|---|---|
|
Sets the value of the slider by clicking on the slider track. Note that in rare cases the value cannot be set to the exact specified value. This can happen if not every value of the slider maps to a single pixel that could be clicked using mouse interaction. In such cases consider using the keyboard to select the given value or expand the slider's size for a better user experience. |
|
参数 Parameters |
|
|
value number
|
|
返回值 Returns |
|
Promise<void>
|
Promise that resolves when the action completes. |
SliderHarnessFilters
A set of criteria that can be used to filter a list of MatSliderHarness instances.