浮动面板 FloatingPanel

内容型面板。

安装

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

属性

Ref

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

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

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

ref.current.setHeight(100)

CSS 变量