Taroify

FloatingPanel 浮动面板

介绍

浮动在页面底部的面板，可以上下拖动来浏览内容，常用于提供额外的功能或信息。

请升级 taroify 到 >= v0.1.0-alpha.3 版本来使用该组件。

引入

import { FloatingPanel } from "@taroify/core"

代码演示

基础用法

FloatingPanel 的默认高度为 100px，用户可以拖动来展开面板，使高度达到 60% 的屏幕高度。

<FloatingPanel>
  <Cell.Group>
    <Cell>1</Cell>
    <Cell>2</Cell>
    <Cell>3</Cell>
    <Cell>4</Cell>
    <Cell>5</Cell>
    <Cell>6</Cell>
    <Cell>7</Cell>
    <Cell>8</Cell>
    <Cell>9</Cell>
    <Cell>10</Cell>
    <Cell>11</Cell>
    <Cell>12</Cell>
    <Cell>13</Cell>
  </Cell.Group>
</FloatingPanel>

自定义锚点

你可以通过 anchors 属性来设置 FloatingPanel 的锚点位置，并通过 height 来控制当前面板的显示高度。比如，使面板的高度在 100px、40% 屏幕高度和 70% 屏幕高度三个位置停靠：

function CustomAnchors() {
  const windowHeight = useMemo(() => getWindowInfo().windowHeight, [])

  const anchors = useMemo(
    () => [200, Math.round(0.4 * windowHeight), Math.round(0.7 * windowHeight)],
    [windowHeight],
  )

  return (
    <FloatingPanel anchors={anchors} height={anchors[0]}>
      <Cell.Group>
        <Cell>1</Cell>
        <Cell>2</Cell>
        <Cell>3</Cell>
        <Cell>4</Cell>
        <Cell>5</Cell>
        <Cell>6</Cell>
        <Cell>7</Cell>
        <Cell>8</Cell>
        <Cell>9</Cell>
        <Cell>10</Cell>
        <Cell>11</Cell>
        <Cell>12</Cell>
        <Cell>13</Cell>
      </Cell.Group>
    </FloatingPanel>
  )
}

仅头部拖拽

默认情况下，FloatingPanel 的头部区域和内容区域都可以被拖拽，你可以通过 contentDraggable 属性来禁用内容区域的拖拽。

function HeadDragOnly() {
  return (
    <FloatingPanel contentDraggable={false}>
      <Cell.Group>
        <Cell>1</Cell>
        <Cell>2</Cell>
        <Cell>3</Cell>
        <Cell>4</Cell>
        <Cell>5</Cell>
        <Cell>6</Cell>
        <Cell>7</Cell>
        <Cell>8</Cell>
        <Cell>9</Cell>
        <Cell>10</Cell>
        <Cell>11</Cell>
        <Cell>12</Cell>
        <Cell>13</Cell>
      </Cell.Group>
    </FloatingPanel>
  )
}

手动设置高度

通过 ref 可以获取到 FloatingPanel 的实例，调用 setHeight 方法可以手动设置 FloatingPanel 的高度。

function CustomHeight() {
  const floatingPanelRef = useRef<any>()
  const resetHeight = () => {
    floatingPanelRef.current?.setHeight(100)
  }

  return (<>
  <Button color="default" onClick={resetHeight}>重置高度</Button>
  <FloatingPanel ref={floatingPanelRef}>
    <Cell.Group>
      <Cell>1</Cell>
      <Cell>2</Cell>
      <Cell>3</Cell>
      <Cell>4</Cell>
      <Cell>5</Cell>
      <Cell>6</Cell>
      <Cell>7</Cell>
      <Cell>8</Cell>
      <Cell>9</Cell>
      <Cell>10</Cell>
      <Cell>11</Cell>
      <Cell>12</Cell>
      <Cell>13</Cell>
    </Cell.Group>
  </FloatingPanel>
</>)
}

API

Flex Props

参数	说明	类型	默认值
height	当前面板的显示高度	number	`0`
anchors	设置自定义锚点, 单位 `px`	number[]	`[100, window.innerWidth * 0.6]`
duration	动画时长，单位秒，设置为 0 可以禁用动画	number	`0.3`
contentDraggable	允许拖拽内容容器	boolean	`true`
safeAreaInsetBottom	是否开启底部安全区适配	boolean	`true`

方法

通过 ref 可以获取到 FloatingPanel 实例并调用实例方法。

方法名	说明	参数	返回值
setHieght	设置面板高度	number	-

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
—floating-panel-z-index	1010	-
—floating-panel-rounded-border-radius	16px $hd*	-
—floating-panel-header-height	60px	-
—floating-panel-bar-height	6px	-
—floating-panel-bar-width	40px	-
—floating-panel-bar-color	var(—gray-5, $gray-5)	-
—floating-panel-background	var(—background-color-light)	-