cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
160 lines (133 loc) • 11.6 kB
Markdown
## 简介
步骤条常用于需要分步操作或展示信息的场景，用户可以清晰地知道当前操作的进程或所在环节。
## 示例
```tsx
import React, { useState, useCallback } from 'react';
import { Step } from '@alicloud/console-components';
const list = [
{ title: '已完成步骤', key: 1 },
{ title: '当前步骤', key: 2 },
{ title: '未完成最后步骤', key: 3 },
];
export default () => {
const [currentStep, setCurrentStep] = useState(1);
const stepClick = useCallback((index) => {
setCurrentStep(index);
}, []);
const steps = list.map((item) => (
<Step.Item
key={item.key}
title={item.title}
onClick={(index) => stepClick(index)}
/>
));
return (
<div>
<Step current={currentStep} shape="circle" labelPlacement="hoz">
{steps}
</Step>
</div>
);
};
export const meta = {
title: '默认',
describe: '基本使用方式。',
};
```
```tsx
import React, { useState, useCallback } from 'react';
import { Step } from '@alicloud/console-components';
export default () => {
const [currentStep, setCurrentStep] = useState(1);
const stepClick = useCallback((index) => {
setCurrentStep(index);
}, []);
return (
<div>
<Step
current={currentStep}
animation={false}
shape="circle"
labelPlacement="hoz"
style={{ marginBottom: '32px' }}
>
<Step.Item
title="已完成步骤"
icon="sub_account"
onClick={(index) => stepClick(index)}
/>
<Step.Item
title="当前步骤"
icon="sub_account"
onClick={(index) => stepClick(index)}
/>
<Step.Item
title="未完成最后步骤"
icon="sub_account"
onClick={(index) => stepClick(index)}
/>
</Step>
<Step
current={currentStep}
animation={false}
shape="circle"
labelPlacement="hoz"
>
<Step.Item
title="已完成步骤"
icon="checkmark"
onClick={(index) => stepClick(index)}
/>
<Step.Item
title="当前步骤"
percent={75}
onClick={(index) => stepClick(index)}
/>
<Step.Item
title="未完成最后步骤"
onClick={(index) => stepClick(index)}
/>
</Step>
</div>
);
};
export const meta = {
title: '特殊样式',
describe: '设置icon属性，添加自定义图标。',
};
```
## API
### Step
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------- | -------- |
| current | 当前步骤 | number | 0 | |
| shape | 类型 | StepShape | 'circle' | |
| direction | 展示方向 | StepDirection | 'hoz' | |
| labelPlacement | 横向布局时的内容排列方式 | StepDirection | 'ver' | |
| readOnly | 是否只读模式 | boolean | - | |
| animation | 是否开启动效 | boolean | true | |
| itemRender | 自定义渲染节点<br/><br/>**签名**:<br/>**参数**:<br/>*index*: 节点索引<br/>*status*: 节点状态<br/>*title*: 节点标题，仅在 `shape='circle'` 时会传递<br/>*content*: 节点内容，仅在 `shape='circle'` 时会传递<br/>**返回值**:<br/>节点的渲染结果 | (<br/> index: number,<br/> status: StepStatus,<br/> title?: ReactNode,<br/> content?: ReactNode<br/> ) => React.ReactNode | - | |
| stretch | 宽度是否横向拉伸 | boolean | false | |
### Step.Item
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- |
| status | 步骤的状态，如不传，会根据外层的 Step 的 current 属性生成 | StepStatus | - | |
| title | 标题 | React.ReactNode | - | |
| icon | 图标 | string | - | |
| content | 内容填充，shape 为 arrow 时无效 | React.ReactNode | - | |
| itemRender | StepItem 的自定义渲染，会覆盖父节点设置的 itemRender<br/><br/>**签名**:<br/>**参数**:<br/>*index*: 节点索引<br/>*status*: 节点状态<br/>*title*: 节点标题，仅在 `shape='circle'` 时会传递<br/>*content*: 节点内容，仅在 `shape='circle'` 时会传递<br/>**返回值**:<br/>节点的渲染结果 | (<br/> index: number,<br/> status: StepStatus,<br/> title?: React.ReactNode,<br/> content?: React.ReactNode<br/> ) => React.ReactNode | - | |
| percent | 百分比 | number | - | |
| disabled | 是否禁用 | boolean | - | |
| onClick | 点击步骤时的回调<br/><br/>**签名**:<br/>**参数**:<br/>*index*: 节点索引 | (index: number) => unknown | - | |
### StepDirection
```typescript
export type StepDirection = 'hoz' | 'ver';
```
### StepStatus
```typescript
export type StepStatus = 'wait' | 'process' | 'finish';
```
### StepShape
```typescript
export type StepShape = 'circle' | 'arrow' | 'dot';
```