0.1.3 • Published 2 years ago
rc-simple-slider v0.1.3
rc-simple-slider
简单滑块组件
用法
import { Slider } from "rc-simple-slider";
export default function App() {
return (
<div>
<Slider />
</div>
);
}属性
| Name | Type | Default | Description |
|---|---|---|---|
| step | number | 100 | 步长 |
| width | number | vertical 为 true 时 6，为 false 时 300 | 宽度 |
| height | number | vertical 为 true 时 300，为 false 时 6 | 高度 |
| showTip | boolean | false | 是否显示提示 |
| vertical | boolean | false | 垂直模式 |
| disabled | boolean | false | 是否禁用 |
| tipBgColor | string | #333 | 提示背景颜色 |
| tipFtColor | string | #fff | 提示字体颜色 |
| contentContainerStyle | object | {} | 容器样式 |
| progressBarColor | string | #686de0 | 进度条颜色 |
| range | number or number, number | 0 | 选择范围 |
| showStops | boolean | false | 是否显示间断点 |
| marks | object | 标记， key 的类型必须为 number 且取值在闭区间 0-100 内，每个标记可以单独设置样式 | |
| debounce | number | 去抖延迟，毫秒，仅 onInput 有用 | |
| tipFormat | Function | noop | 提示信息格式化 |
| ariaValuetextFormat | Function | noop | 显示屏幕阅读器的 aria-valuenow 属性的格式化 |
| children | Function | 替代默认的 button | |
| onInput | Function | noop | 值改变时触发 |
| onChange | Function | noop | 值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发） |
example
vertical
import { Slider } from "rc-simple-slider";
export default function App() {
return (
<div>
<Slider vertical/>
</div>
);
}
showStops && step=10
import { Slider } from "rc-simple-slider";
export default function App() {
return (
<div>
<Slider showStops step={10}/>
</div>
);
}
marks
import { Slider } from "rc-simple-slider";
const marks = {
0: 0,
8: 8,
50: 50,
70: {
style: {
color: 'deeppink',
fontSize: 18,
},
label: 70,
},
};
export default function App() {
return (
<div>
<Slider marks={marks}/>
</div>
);
}
children
import { Slider } from "rc-simple-slider";
import Pikachu from './Pikachu.png';
export default function App() {
return (
<div>
<Slider>
{() => {
return (
<img
style={{ width: '100%', height: '100%', position: 'absolute' }}
src={Pikachu}
/>
);
}}
</Slider>
</div>
);
}