FloatingPanel

Content panel.

Install

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:

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

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