cnd-components-mcp/componentData/components/CndSmartBalloon.md

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

---
group:
  title: 云原生业务组件
---

# SmartBalloon 智能气泡组件

## 代码库地址
https://code.alibaba-inc.com/cn-lowcode/cnd-smart-balloon

## 基本使用
```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;
```

基本用法中继承了 xconsole 中 Balloon 中所有属性

## 为提示内容添加反馈

```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;
```

> 使用 hasFeedback 属性 控制反馈内容的展示，默认不展示<br />
> 设置 hasFeedback 属性时，product 与 code 必填

## 点击提示框区域进行放大预览

```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;
```

> 使用 canPreview 可设置提示框内容是是否需要预览，默认不设置，如果设置了 canPreview 为 true，点击提示框任意区域可进行预览

## API

继承 @alicloud/console-components 基础组件 Balloon 的 API

| 属性         | 说明                                               | 类型    | 默认值 |
| ------------ | -------------------------------------------------- | ------- | ------ |
| hasFeedback  | 是否展示提示有效性反馈 DOM                         | Boolean | false  |
| previewStyle | 预览框样式设置 ｜ Object                           | {}      |
| canPreview   | 是否开启提示框预览功能                             | Boolean | false  |
| product      | 提示所在的产品名称<br />直接从项目中获取，不可编辑 | String  | -      |
| code         | 该条提示在产品中对应的唯一标识                     | String  | -      |