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

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

## 示例
```tsx
import React, { useState } from 'react';
import { Button, Dialog } from '@alicloud/console-components';

const content = (
  <div
    style={{
      width: '344px',
      height: '170px',
      borderRadius: '4px',
      background: '#F6F6F6',
      color: '#aaa',
      textAlign: 'center',
      lineHeight: '170px',
    }}
  >
    Dialog Content
  &lt;/div&gt;
);
export default () => {
  const [visible, setVisible] = useState(false);
  return (
    &lt;div className="App"&gt;
      &lt;Button onClick={() =&gt; setVisible(!visible)} type="primary">
        标题
      &lt;/Button&gt;
      {visible && (
        <Dialog
          title="标题"
          visible={visible}
          footerAlign="right"
          onOk={() => setVisible(!visible)}
          onCancel={() => setVisible(!visible)}
          onClose={() => setVisible(!visible)}
        >
          {content}
        &lt;/Dialog&gt;
      )}
    &lt;/div&gt;
  );
};

export const meta = {
  title: '基础对话框',
  describe:
    '对话框是用于在不离开主路径的情况下，提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。',
};

```
```tsx
import React from 'react';
import { Button, Dialog } from '@alicloud/console-components';

const popupConfirm = () => {
  Dialog.confirm({
    title: '正常提示',
    content: '详细文本信息或状态描述',
    onOk: () => console.log('ok'),
    onCancel: () => console.log('cancel'),
    closeable: false,
  });
};

export default () => {
  return (
    &lt;div&gt;
      &lt;Button onClick={popupConfirm}&gt;正常提示&lt;/Button&gt;
    &lt;/div&gt;
  );
};

export const meta = {
  title: '提示对话框',
  describe:
    'Dialog 提供 alert 和 confirm 的快捷调用方式，以及更底层的 show 方式。',
};

```