# FloatingBubble <Experimental></Experimental>

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/floating-bubble
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

A clickable bubble that hovers at the edge of the page.

## Install

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

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register `createRoot` with `unstableSetRender` at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with `<html data-prefers-color-scheme="dark">`.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as `DemoBlock` are JGuang rewrites, not antd-mobile APIs.

A clickable bubble that hovers at the edge of the page.

## When to Use

Suitable for providing extra functionality to the current page.

## Demos

## FloatingBubble

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| axis | The direction in which the drag can be performed, `'xy'` means free movement, `'lock'` means movement is only allowed in the direction in which the drag started. | `'x' \| 'y' \| 'xy' \| 'lock'` | `'y'` |
| children | Content of the bubble. | ReactNode | ----- |
| magnetic | Automatic magnetic attraction to the boundary. | `'x' \| 'y'` | - |
| defaultOffset | Default offset position | `{ x: number; y: number }` | `{ x: 0, y: 0 }` |
| offset | Offset position | `{ x: number; y: number }` |  |
| onOffsetChange | Callback function when changing | `(offset:{ x: number; y: number }) => void` | - |

### CSS Variables

| Name | Description | Default |
| --- | --- | --- |
| --background | background of the bubble. | `var(--adm-color-primary)` |
| --border-radius | border-radius of the bubble. | `50%` |
| --edge-distance | Minimum distance to the edge of the screen | `0` |
| --initial-position-bottom | Initial distance from the bottom side of the screen | - |
| --initial-position-left | Initial distance from the left side of the screen | - |
| --initial-position-right | Initial distance from the right side of the screen | - |
| --initial-position-top | Initial distance from the top side of the screen | - |
| --size | Size of the bubble. | `48px` |
| --z-index | z-index of the bubble. | `1` |

**You must either set `--initial-position-top` or `--initial-position-bottom`. Also, you must either set `--initial-position-left` or `--initial-position-right`.**

---

Index of all JGuang resources: https://jiguang132.com/llms.txt