qxk-app-component v1.0.5

快速上手

安装

# 通过 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 参数说明

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

Slots

events

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