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