cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
212 lines (173 loc) • 8.87 kB
Markdown
## 简介
信息提示包含两种形式，即【信息提示条 Message Strip】与 【全局提示 Toast】。
【信息提示条 Message Strip】常用于承载页面中的引导、提示、警示等信息的展示，通过不同的语义色标示不同类型的提示信息。
【全局提示 Toast】常用于提供成功、错误、运行中等状态信息的提示，显示后会自动消失，属于不会阻断用户操作的轻量级反馈提示。
## 示例
### 基础形态
```tsx
import React from 'react';
import { Message } from '@alicloud/console-components';
export default () => {
return (
<Message type="notice">运营类信息或提示类信息</Message>
);
};
export const meta = {
title: '默认',
describe: '',
};
```
### 语义
```tsx
import React from 'react';
import { Message, Grid } from '@alicloud/console-components';
const { Row, Col } = Grid;
export default () => {
return (
<Row gutter={8} wrap>
<Col span={12} >
<br />
<h5>无语义</h5>
<Message type="help">描述文案或其他内容类信息</Message>
</Col>
<Col span={12}>
<br />
<h5>高亮</h5>
<Message type="notice">运营类信息或提示类信息</Message>
</Col>
<Col span={12}>
<br />
<h5>成功</h5>
<Message type="success">信息成功提示类或完成结果提醒</Message>
</Col>
<Col span={12}>
<br />
<h5>中危</h5>
<Message type="warning">轻量警示信息或重要提示信息</Message>
</Col>
<Col span={12}>
<br />
<h5>高危</h5>
<Message type="error">
重量级警示、提示、报错或无法回退的操作提示
</Message>
</Col>
</Row>
);
};
export const meta = {
title: '',
describe: '以默认信息条状态为例',
};
```
### 全局提示 Toast
```tsx
import React from 'react';
import { Button, Message, Grid } from '@alicloud/console-components';
const { Row, Col } = Grid;
const showNotice = () =>
Message.notice({
content: '这是一条询问消息，>=3s后主动消失',
duration: 3000,
});
const showSuccess = () =>
Message.success({
content: '这是一条询问消息，>=3s后主动消失',
duration: 3000,
});
const showWarning = () =>
Message.warning({
content: '这是一条询问消息，>=3s后主动消失',
duration: 3000,
});
const showError = () =>
Message.error({
content: '这是一条询问消息，>=3s后主动消失',
duration: 3000,
});
const showHelp = () =>
Message.help({ content: '这是一条询问消息，>=3s后主动消失', duration: 3000 });
const showLoading = () =>
Message.loading({
content: '这是一条询问消息，>=3s后主动消失',
duration: 3000,
});
export default () => {
return (
<Row>
<Col>
<Button onClick={showSuccess}>Message.success</Button>
</Col>
<Col>
<Button onClick={showWarning}>Message.warning</Button>
</Col>
<Col>
<Button onClick={showError}>Message.error</Button>
</Col>
<Col>
<Button onClick={showNotice}>Message.notice</Button>
</Col>
<Col>
<Button onClick={showHelp}>Message.help</Button>
</Col>
<Col>
<Button onClick={showLoading}>Message.loading</Button>
</Col>
</Row>
);
};
export const meta = {
title: '',
describe: '',
};
```
## API
### Message
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| -------------- | ----------------------------------------------------------- | -------------------------------------------------------------------- | ----------- | -------- |
| type | 反馈类型 | 'success' | 'warning' | 'error' | 'notice' | 'help' | 'loading' | 'success' | |
| shape | 反馈外观 | 'inline' | 'addon' | 'toast' | 'inline' | |
| size | 反馈大小 | 'medium' | 'large' | 'medium' | |
| title | 标题 | React.ReactNode | - | |
| children | 内容，非函数式调用下使用 | React.ReactNode | - | |
| defaultVisible | 默认是否显示 | boolean | false | |
| visible | 当前是否显示 | boolean | - | |
| iconType | 显示的图标类型，会覆盖内部设置的IconType，传false不显示图标 | string | false | - | |
| closeable | 显示关闭按钮 | boolean | false | |
| onClose | 关闭按钮的回调 | () => void | () => {} | |
| afterClose | 关闭之后调用的函数 | () => void | () => {} | |
| animation | 是否开启展开收起动画 | boolean | true | |
### Message.show
Message.show(props) 提供一个单例的调用方式，配置参数如下（继承 Overlay 的配置）：
```js
Message.show({
type: 'error',
title: '错误',
content: '请联系相关人员反馈！',
hasMask: true,
});
```
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| ------------ | ----------------------------------------- | -------------------------------------------------------------------- | ----------- | -------- |
| type | 反馈类型 | 'success' | 'warning' | 'error' | 'notice' | 'help' | 'loading' | 'success' | |
| size | 反馈大小 | 'medium' | 'large' | 'medium' | |
| title | 标题 | React.ReactNode | - | |
| content | 内容，函数式调用下使用 | React.ReactNode | - | |
| align | 弹层对齐方式，详情见 Overlay align | string | boolean | 'tc tc' | |
| offset | 弹层相对于参照元素定位的微调 | Array\<number> | \[0, 0] | |
| hasMask | 是否显示遮罩 | boolean | false | |
| duration | 显示持续时间，0表示一直存在，以毫秒为单位 | number | 3000 | |
| closeable | 显示关闭按钮 | boolean | false | |
| onClose | 关闭按钮的回调 | () => void | () => {} | |
| afterClose | 关闭之后调用的函数 | () => void | () => {} | |
| animation | 是否开启展开收起动画 | boolean | true | |
| overlayProps | 透传到弹层组件的属性对象 | OverlayProps | - | |
## 更多示例
```tsx
```
```tsx
```
```tsx
```
```tsx
```