# 浮动面板 FloatingPanel

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/floating-panel
- 资源: 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。

内容型面板。

## 何时使用

用户可自由灵活上下滑动浏览内容，常用于地图导航。

## 示例

## FloatingPanel

### 属性

| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| anchors | 可拖拽至哪些高度，单位为 `px` | `number[]` | - |  |
| handleDraggingOfContent | 是否会处理面板内容区域的拖拽事件，禁用后则只能拖拽头部区域 | `boolean` | `true` |  |
| onHeightChange | 当高度变化时触发，`animating` 参数表示是否处于动画过程中 | `(height: number, animating: boolean) => void` |  |  |
| placement | 指定面板出现的方向 | `'bottom' \| 'top'` | `'bottom'` | 5.39.0 |
| inertiaFactor | 惯性系数，用于吸附判定。快速滑动时速度会附加额外位移，使面板更容易到达较远的锚点。设为 0 可禁用。推荐值：50~100 | `number` | `50` | 5.42.3 |

### Ref

FloatingPanel 的 ref 上提供了 `setHeight` 方法，你可以通过它来指令式地控制 `FloatingPanel` 的高度：

```ts
type FloatingPanelRef = {
  setHeight: (
    height: number,
    options?: {
      immediate?: boolean // 是否跳过动画
    }
  ) => void
}
```

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

ref.current.setHeight(100)
```

### CSS 变量

| 变量名          | 描述           | 默认值 | 全局变量                       |
| --------------- | -------------- | ------ | ------------------------------ |
| --border-radius | 面板头部的圆角 | `8px`  |                                |
| --header-height | 面板头部的高度 | `28px` |                                |
| --z-index       | 面板的 z-index | `900`  | `--adm-floating-panel-z-index` |

---

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