风速
一个移动的,平板的,桌面的,以及网络的可访问的滑动器.
安装
npm install rheostat
道具
默认算法 linear,滑块将使用。 随便写
只要它符合形状,你自己的.
algorithm: PropTypes.shape({
getValue: PropTypes.func,
getPosition: PropTypes.func,
})
自定义类名称将应用到 Rheostat 根上 .
className: PropTypes.string
自定义反应组件覆盖控件和"进步"栏.
handle: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
progressBar: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
最大和最小可能值,默认为0-100.
max: PropTypes.number
min: PropTypes.number
pitComponent 是一个自定义的 React 组件,用于跨栏渲染“ pits ”.
pitPoints 那是它使坑形的一组点。 点是数组
联 合 国 values 在滑轮上.
pitComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
pitPoints: PropTypes.arrayOf(PropTypes.number)
注: onChange 当值被改变和承诺时,就称为值。 这发生在最后
拖曳、按键或单击事件. onChange 当您想要坚持这些价值观时,建议您这样做.
onValuesUpdated 是一个正在激活值时触发的方便事件
已更改。 这包括拖放、点击或按键. onValuesUpdated 如果需要,则建议
在他们承诺之前 与价值观合作.
onChange: PropTypes.func
onClick: PropTypes.func
onKeyPress: PropTypes.func
onSliderDragEnd: PropTypes.func
onSliderDragMove: PropTypes.func
onSliderDragStart: PropTypes.func
onValuesUpdated: PropTypes.func
snap 是布林能控制滑动器的快取行为.
snapPoints 是一组 values 在滑块上,滑块应该按住.
若为 snap 设定为真实和否 snapPoints 设置,然后滑动器被切成绝对
立场。 例如,在1-10的尺度上,如果滑动器在54%的标记被松开,它会选择
值 5 , 坐标为 50%.
snap: PropTypes.bool
snapPoints: PropTypes.arrayOf(PropTypes.number)
默认值为0和100.
values: PropTypes.arrayOf(PropTypes.number)
可以禁用滑动器来阻止用户移动.
disabled: PropTypes.bool
使用量
重要:确保纳入 css 文件 : 或自由创造自己的.
- 很简单.
import Rheostat from 'rheostat';
ReactDOM.render(<Rheostat />, document.getElementById('slider-root'));
- 有多个手柄的滑动器.
import Rheostat from 'rheostat';
ReactDOM.render((
<Rheostat
min={1}
max={100}
values={[1, 100]}
/>
), document.getElementById('slider-root'));
现场播放
更多的例子,你可以查看故事书.
- 把这台重机打掉.
npm installnpm run storybook- 访问
http://localhost:9001/。 。 。 .