UNPKG

3.88 kBTypeScriptView Raw
1import { ComponentType } from 'react'
2import { StandardProps, CommonEventFunction, FormItemProps } from './common'
3interface SliderProps extends StandardProps, FormItemProps {
4 /** 最小值
5 * @default 0
6 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
7 */
8 min?: number
9
10 /** 最大值
11 * @default 100
12 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
13 */
14 max?: number
15
16 /** 步长，取值必须大于 0，并且可被(max - min)整除
17 * @default 1
18 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
19 */
20 step?: number
21
22 /** 是否禁用
23 * @default false
24 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
25 */
26 disabled?: boolean
27
28 /** 当前取值
29 * @default 0
30 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
31 */
32 value?: number
33
34 /** 背景条的颜色（请使用 backgroundColor）
35 * @default "#e9e9e9"
36 * @supported weapp, tt, qq, jd
37 */
38 color?: string
39
40 /** 已选择的颜色（请使用 activeColor）
41 * @default "#1aad19"
42 * @supported weapp, tt, qq, jd
43 */
44 selectedColor?: string
45
46 /** 已选择的颜色
47 * @default "#1aad19"
48 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
49 */
50 activeColor?: string
51
52 /** 背景条的颜色
53 * @default "#e9e9e9"
54 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
55 */
56 backgroundColor?: string
57
58 /** 滑块的大小，取值范围为 12 - 28
59 * @default 28
60 * @supported weapp, swan, tt, qq, jd, h5
61 */
62 blockSize?: number
63
64 /** 滑块的颜色
65 * @default "#ffffff"
66 * @supported weapp, swan, tt, qq, jd, h5, rn
67 */
68 blockColor?: string
69
70 /** 是否显示当前 value
71 * @default false
72 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
73 */
74 showValue?: boolean
75
76 /** 组件名字，用于表单提交获取数据。
77 * @supported alipay
78 */
79 name?: string
80
81 /** 轨道线条高度。
82 * @default 4
83 * @supported alipay
84 */
85 trackSize?: string
86
87 /** 滑块大小。
88 * @default 22
89 * @supported alipay
90 */
91 handleSize?: string
92
93 /** 滑块填充色，同 CSS 色值。
94 * @supported alipay
95 */
96 handleColor?: string
97
98 /** 无障碍访问，（属性）元素的额外描述
99 * @supported qq
100 */
101 ariaLabel?: string
102
103 /** 完成一次拖动后触发的事件
104 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
105 */
106 onChange?: CommonEventFunction<SliderProps.onChangeEventDetail>
107
108 /** 拖动过程中触发的事件
109 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn
110 */
111 onChanging?: CommonEventFunction<SliderProps.onChangeEventDetail>
112}
113declare namespace SliderProps {
114 interface onChangeEventDetail {
115 value
116 }
117}
118
119/** 滑动选择器
120 * @classification forms
121 * @supported weapp, alipay, swan, tt, qq, jd, h5, rn, harmony
122 * @example_react
123 * ```tsx
124 * export default class PageView extends Component {
125 * constructor() {
126 * super(...arguments)
127 * }
128 *
129 * render() {
130 * return (
131 * <View className='components-page'>
132 * <Text>设置 step</Text>
133 * <Slider step={1} value={50}/>
134 * <Text>显示当前 value</Text>
135 * <Slider step={1} value={50} showValue/>
136 * <Text>设置最小/最大值</Text>
137 * <Slider step={1} value={100} showValue min={50} max={200}/>
138 * </View>
139 * )
140 * }
141 * }
142 * ```
143 * @example_vue
144 * ```html
145 * <template>
146 * <view class="components-page">
147 * <text>设置 step</text>
148 * <slider step="1" value="50"/>
149 * <text>显示当前 value</text>
150 * <slider step="1" value="50" :show-value="true" />
151 * <text>设置最小/最大值</text>
152 * <slider step="1" value="100" :show-value="true" min="50" max="200"/>
153 * </view>
154 * </template>
155 * ```
156 * @see https://developers.weixin.qq.com/miniprogram/dev/component/slider.html
157 */
158declare const Slider: ComponentType<SliderProps>
159export { Slider, SliderProps }