cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务,包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
27 lines • 7.18 kB
Markdown
滑动条也称滑块,常用于数字输入的场景,用户在连续或间断的区间内通过滑动锚点来选择一个数字或指定数字区间。
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------------- | -------- |
| slider | 滑块个数<br/><br/>**可选值**:<br/>'single'(单个)<br/>'double'(两个) | 'single' | 'double' | 'single' | |
| min | 最小值 | number | 0 | |
| max | 最大值 | number | 100 | |
| step | 步长,取值必须大于 0,并且可被 (max - min) 整除 | number | 1 | |
| value | 设置当前取值。当 `slider` 为 `single` 时,使用 `Number`,否则用 `[Number, Number]` | RangeValueType | - | |
| defaultValue | 设置初始取值。当 `slider` 为 `single` 时,使用 `Number`,否则用 `[Number, Number]` | RangeValueType | - | |
| marks | 刻度数值显示逻辑(false 代表不显示,array 枚举显示的值,number 代表按 number 平分,object 表示按 key 划分,value 值显示) | false | number | Array\<number> | Record\<number, string> | false | |
| marksPosition | marks显示在上方('above')or下方('below')<br/><br/>**可选值**:<br/>'above', 'below' | 'above' | 'below' | 'above' | |
| disabled | 值为 `true` 时,滑块为禁用状态 | boolean | false | |
| onChange | 当 Range 的值发生改变后,会触发 onChange 事件,并把改变后的值作为参数传入, 如果设置了value, 要配合此函数做受控使用<br/><br/>**签名**:<br/>**参数**:<br/>*value*: 改变后的值 | (value: RangeValueType) => void | () => void | |
| onProcess | 滑块拖动的时候触发的事件,不建议在这里setState, 一般情况下不需要用, 滑动时有特殊需求时使用<br/><br/>**签名**:<br/>**参数**:<br/>*value*: 改变后的值 | (value: RangeValueType) => void | () => void | |
| hasTip | 是否显示 tip | boolean | true | |
| tipRender | 自定义 tip 显示内容<br/><br/>**签名**:<br/>**参数**:<br/>*value*: 改变后的值<br/>**返回值**:<br/>`React.ReactNode` | (value: number | string) => `React.ReactNode` | (value) => value | |
| reverse | 选中态反转 | boolean | false | |
| pure | 是否pure render | boolean | false | |
| fixedWidth | 是否为拖动线段类型,默认slider为double, defaultValue必传且指定区间 | boolean | false | |
| tooltipVisible | tooltip是否默认展示 | boolean | false | |
| isPreview | 是否为预览态 | boolean | false | |
| renderPreview | 预览态模式下渲染的内容<br/><br/>**签名**:<br/>**参数**:<br/>*value*: 改变后的值<br/>*props*: RangeProps<br/>**返回值**:<br/>`React.ReactNode` | (value: RangeValueType | undefined, props: RangeProps) => `React.ReactNode` | - | |
| 按键 | 说明 |
| :---------- | :--------------- |
| Right Arrow | 控制滑块往右移动 |
| Left Arrow | 控制滑块向左移动 |
| Tab | 切换滑动条 |