cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
159 lines (128 loc) • 9.46 kB
Markdown
## 简介
滑动条也称滑块，常用于数字输入的场景，用户在连续或间断的区间内通过滑动锚点来选择一个数字或指定数字区间。
## 示例
```tsx
import React from 'react';
import { Range } from '@alicloud/console-components';
const style = {
marginBottom: '15px',
};
const h4Style = {
fontSize: '12px',
marginTop: '24px',
};
export default () => {
return (
<div>
<h4 style={h4Style}>指定值（从左向右配置）</h4>
<Range defaultValue={30} style={style} hasTip={false} />
<h4 style={h4Style}>指定值（从右向左配置）</h4>
<Range defaultValue={30} style={style} reverse hasTip={false} />
<h4 style={h4Style}>指定区间（两端向内配置）</h4>
<Range slider={'double'} defaultValue={[25, 75]} style={style} />
<h4 style={h4Style}>指定区间（两端向外配置）</h4>
<Range slider={'double'} defaultValue={[25, 75]} style={style} reverse />
</div>
);
};
export const meta = {
title: '基础形态',
describe: '通过设置reverse选择配置方向，通过设置slider为double可配置双滑块。',
};
```
```tsx
import React from 'react';
import { Range } from '@alicloud/console-components';
const style = {
marginBottom: '15px',
};
const h4Style = {
fontSize: '12px',
marginTop: '24px',
};
export default () => {
return (
<div>
<h4 style={h4Style}>默认</h4>
<Range defaultValue={4} style={style} max={10} hasTip />
<h4 style={h4Style}>禁用</h4>
<Range defaultValue={4} style={style} max={10} disabled />
</div>
);
};
export const meta = {
title: '基础形态交互（以从左向右配置为例）',
describe: '基础交互形态。',
};
```
```tsx
import React from 'react';
import { Range } from '@alicloud/console-components';
const style = {
marginBottom: '15px',
};
const h4Style = {
fontSize: '12px',
marginTop: '24px',
};
export default () => {
return (
<div>
<h4 style={h4Style}>默认</h4>
<Range defaultValue={4} marks={10} max={10} style={style} hasTip />
<h4 style={h4Style}>禁用</h4>
<Range defaultValue={4} marks={10} max={10} style={style} disabled />
</div>
);
};
export const meta = {
title: '基础带刻度交互（以从左向右配置为例）',
describe: '通过设置marks配置刻度数值显示逻辑。',
};
```
## API
### Range
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------------- | -------- |
| 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 | - | |
### RangeValueType
```typescript
export type RangeValueType = number | [number, number];
```
## 无障碍键盘操作指南
| 按键 | 说明 |
| :---------- | :--------------- |
| Right Arrow | 控制滑块往右移动 |
| Left Arrow | 控制滑块向左移动 |
| Tab | 切换滑动条 |
## 更多示例
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```