# FloatingPanel

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

Content panel.

## 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.

Content panel.

## When to Use

Users can freely and flexibly slide up and down to browse the content, which is often used for map navigation.

## Demos

## FloatingPanel

### Props

| Name | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| anchors | What height can be dragged to, the unit is `px` | `number[]` | - |  |
| handleDraggingOfContent | Whether to handle the drag event of the panel content area. If disabled, only the head area can be dragged | `boolean` | `true` |  |
| onHeightChange | Triggered when the height changes, the `animating` parameter indicates whether it is in the process of animation | `(height: number, animating: boolean) => void` |  |  |
| placement | Specify the direction in which the panel appears. | `'bottom' \| 'top'` | `'bottom'` | 5.39.0 |
| inertiaFactor | Inertia factor for snap behavior. When the user flicks fast, velocity adds extra displacement to the snap target, making it easier to reach distant anchors. Set to 0 to disable. Recommended value: 50~100 | `number` | `50` | 5.42.3 |

### Ref

The FloatingPanel ref provides the `setHeight` method, you can use it to control the height of the `FloatingPanel` imperatively:

```ts
type FloatingPanelRef = {
  setHeight: (
    height: number,
    options?: {
      immediate?: boolean // whether to skip animation
    }
  ) => void
}
```

```jsx
<FloatingPanel ref={ref}>...</FloatingPanel>

ref.current.setHeight(100)
```

### CSS Variables

| Name | Description | Default | Global |
| --- | --- | --- | --- |
| --border-radius | the border radius of the Panel header | `8px` |  |
| --header-height | the height of the Panel header | `28px` |  |
| --z-index | z-index of the Panel | `900` | `--adm-floating-panel-z-index` |

---

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