cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
99 lines (85 loc) • 5.22 kB
Markdown
## 简介
进度指示也称进度条，常用于可视化展示比例、进展、完成度等类型信息。
## 示例
```tsx
import React from 'react';
import { Progress } from '@alicloud/console-components';
export default () => {
return (
<div style={{ display: 'flex' }}>
<div style={{ flex: 1 }}>
<h5>默认</h5>
<div>
<Progress percent={80} state="normal" />
<Progress percent={60} state="success" />
<Progress percent={40} state="error" />
</div>
</div>
<div style={{ flex: 1 }}>
<h5>小号</h5>
<div>
<Progress percent={80} state="normal" size="small" />
<Progress percent={60} state="success" size="small" />
<Progress percent={40} state="error" size="small" />
</div>
</div>
</div>
);
};
export const meta = {
title: '条形状态',
describe: '进度条默认为条形状态。',
};
```
```tsx
import React from 'react';
import { Progress } from '@alicloud/console-components';
const h2Style = {
fontSize: '12px',
lineHeight: '22px',
marginTop: '24px',
};
const containerStyle = {
display: 'flex',
gap: '10px',
};
export default () => {
return (
<div style={{ display: 'flex' }}>
<div style={{ flex: 1 }}>
<div style={h2Style}>默认</div>
<div style={containerStyle}>
<Progress shape="circle" percent={80} state="normal" />
<Progress shape="circle" percent={60} state="success" />
<Progress shape="circle" percent={40} state="error" />
</div>
</div>
<div style={{ flex: 1 }}>
<div style={h2Style}>小号</div>
<div style={containerStyle}>
<Progress shape="circle" percent={80} state="normal" size="small" />
<Progress shape="circle" percent={60} state="success" size="small" />
<Progress shape="circle" percent={40} state="error" size="small" />
</div>
</div>
</div>
);
};
export const meta = {
title: '环形状态',
describe: '通过设置shape属性为circle，设置成环形样式。',
};
```
## API
### Progress
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ----------------------------------------- | -------- |
| shape | 形态 | 'circle' | 'line' | 'line' | |
| size | 尺寸 | 'small' | 'medium' | 'large' | 'medium' | |
| percent | 所占百分比 | number | 0 | |
| state | 进度状态, 显示优先级: color > progressive > state | 'normal' | 'success' | 'error' | 'normal' | |
| progressive | 是否为色彩阶段变化模式, 显示优先级: color > progressive > state | boolean | false | |
| hasBorder | 是否添加 Border（只适用于 Line Progress) | boolean | false | |
| textRender | 文本渲染函数<br/><br/>**签名**:<br/>**参数**:<br/>*percent*: 当前的进度信息<br/>*option*: 额外的参数<br/>**返回值**:<br/>文本节点 | (percent: number, option?: {rtl?: boolean}) => React.ReactNode | percent => \`${Math.floor(percent)}%\` | |
| color | 进度条颜色, 显示优先级: color > progressive > state | string | - | |
| backgroundColor | 背景色 | string | - | |