# 浮动气泡 <Experimental></Experimental> FloatingBubble <Experimental></Experimental>

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/floating-bubble
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

悬浮在页面边缘的可点击气泡。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

悬浮在页面边缘的可点击气泡。

## 何时使用

适用于为当前页面提供额外功能。

## 示例

## FloatingBubble

### 属性

| 属性 | 描述 | 类型 | 默认值 |
| --- | --- | --- | --- |
| axis | 可以进行拖动的方向，`'xy'` 表示自由移动，`'lock'` 表示只允许在拖拽开始时的方向上移动 | `'x' \| 'y' \| 'xy' \| 'lock'` | `'y'` |
| children | 气泡的内容 | ReactNode | - |
| magnetic | 自动磁吸到边界 | `'x' \| 'y'` | - |
| defaultOffset | 默认偏移位置 | `{ x: number; y: number }` | `{ x: 0, y: 0 }` |
| offset | 偏移位置 | `{ x: number; y: number }` |  |
| onOffsetChange | 偏移位置变化时的回调函数 | `(offset:{ x: number; y: number }) => void` | - |

### CSS 变量

| 变量名 | 描述 | 默认值 |
| --- | --- | --- |
| --background | 气泡的背景色 | `var(--adm-color-primary)` |
| --border-radius | 气泡的 border-radius | `50%` |
| --edge-distance | 和屏幕四周的最小间距 | `0` |
| --initial-position-bottom | 初始状态组件距离屏幕下边的距离 | - |
| --initial-position-left | 初始状态组件距离屏幕左边的距离 | - |
| --initial-position-right | 初始状态组件距离屏幕右边的距离 | - |
| --initial-position-top | 初始状态组件距离屏幕上边的距离 | - |
| --size | 气泡大小 | `48px` |
| --z-index | 气泡的 z-index | `1` |

**在使用时，你必须设置 `--initial-position-top` 和 `--initial-position-bottom` 其中的一项，同时，也必须设置 `--initial-position-left` 和 `--initial-position-right` 其中的一项。**

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt