快速上手

安装

# 通过 npm
npm i qxk-app-component

# 通过 yarn
yarn add qxk-app-component

# 通过 pnpm
pnpm add qxk-app-component

FloatingPanel 浮动面板

内容型面板。

何时使用

import 'qxk-app-component/lib/index.css' import { FloatingPanel } from 'qxk-app-component'

用户可自由灵活上下滑动浏览内容，常用于地图导航。 const anchors = [100, window.innerHeight * 0.4, window.innerHeight * 0.8];

示例

FloatingPanel

属性

| 参数 | 说明 | 类型 | 默认值 | | -------------- | --------------------------- | ---------- | -------- | | anchors | 可拖拽至哪些高度，单位为 px | number[] | - | | isFollowScroll | 是否拖拽跟随 | boolean | false | | height | 面板高度 | number | 屏幕高度 | | distance | 上滑 or 下滑阈值 | number | 40 |

anchors 参数说明

const anchors = [画板上边界, 初始化位置, 画板下边界];

Slots

| 名称 | 说明 | | ------- | ------------ | | default | 默认内容插槽 | | header | 头部插槽 |

events

| 名称 | 说明 | | ------------ | ------------ | | heightChange | 高度发生变化 |

Ref

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

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

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

ref.value.setTop(100)

贡献者

zhen.wang; 感觉组件对你业务有帮助，请用你发财的小手，点点Star