UNPKG

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