cnd-components-mcp/componentData/components/Message/examples.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

### 基础形态
```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: '',
};

```
## 更多示例
```tsx
```
```tsx
```
```tsx
```
```tsx
```