cnd-components-mcp
Version:
An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询
87 lines (81 loc) • 2.38 kB
Markdown
## 基本使用
```tsx preview
import React from "react";
import { SmartBalloon, Button } from '@ali/cnd';
const Demo = () => {
return (
<SmartBalloon
trigger={<Button>基本用法test</Button>}
children={"这是一条文字提示"}
align="tl"
alignEdge
triggerType="click"
style={{ width: 400, maxWidth: 400 }}
/>
);
};
export default Demo;
```
## 为提示内容添加反馈
```tsx preview
import React from "react";
import { SmartBalloon, Button } from '@ali/cnd';
const Demo = () => {
const content = (
<div>
<h5>这是一条文字提示</h5>
<span>
这是一条文字提示的详细内容，这是一条文字提示的详细内容。这是一条文字提示的详细内容，这是一条文字提示的详细内容。这是一条文字提示的详细内容，这是一条文字提示的详细内容。
</span>
</div>
);
return (
<SmartBalloon
hasFeedback={true}
trigger={<Button>提示有效性反馈</Button>}
children={content}
align="t"
triggerType="click"
product="mse"
code=""
style={{ width: 400, maxWidth: 400 }}
/>
);
};
export default Demo;
```
## 点击提示框区域进行放大预览
```tsx preview
import React from "react";
import { SmartBalloon, Button } from '@ali/cnd';
const Demo = () => {
const content = (
<div>
<h4 style={{ marginTop: 0 }}>balloon title</h4>
<hr />
<p>balloon content</p>
<div>
<h5>这是一条文字提示</h5>
<span>
这是一条文字提示的详细内容，这是一条文字提示的详细内容。这是一条文字提示的详细内容，这是一条文字提示的详细内容。这是一条文字提示的详细内容，这是一条文字提示的详细内容。
</span>
</div>
</div>
);
return (
<SmartBalloon
closable={false}
hasFeedback={true}
trigger={<Button>点击提示框预览</Button>}
children={content}
align="t"
alignEdge
triggerType="click"
canPreview={true}
style={{ width: 400, maxWidth: 400 }}
previewStyle={{ width: 1000 }}
/>
);
};
export default Demo;
```