TaroifyReact UI

    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>
  )
}

    监听拖拽

    通过 onDragStart、onDragging 和 onDragEnd 可以监听面板的拖拽过程。事件参数中的 height 表示当前面板高度，其中 onDragEnd 返回吸附到锚点后的最终高度。

    <FloatingPanel
  onDragStart={({ height }) => {
    console.log("drag start", height)
  }}
  onDragging={({ height }) => {
    console.log("dragging", height)
  }}
  onDragEnd={({ height }) => {
    console.log("drag end", height)
  }}
>
  <Cell.Group>
    <Cell>内容</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当前面板的显示高度number0
    anchors设置自定义锚点, 单位 pxnumber[][100, window.innerWidth * 0.6]
    duration动画时长，单位秒，设置为 0 可以禁用动画number0.3
    contentDraggable允许拖拽内容容器booleantrue
    safeAreaInsetBottom是否开启底部安全区适配booleantrue
    safeAreaProps v1.0.0底部安全区属性（不包含 position）Omit<SafeAreaProps, "position">-

    Events

    事件名说明回调参数
    onDragStart v1.0.0面板开始拖拽时触发{ height: number }
    onDragging v1.0.0面板拖拽过程中持续触发{ height: number }
    onDragEnd v1.0.0面板结束拖拽并吸附到锚点后触发{ height: number }

    方法

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

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

    主题定制

    样式变量

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

    名称默认值描述
    --floating-panel-z-index1010-
    --floating-panel-rounded-border-radius16px * $hd-
    --floating-panel-header-height60px-
    --floating-panel-bar-height6px-
    --floating-panel-bar-width40px-
    --floating-panel-bar-colorvar(--gray-5, $gray-5)-
    --floating-panel-backgroundvar(--background-color-light)-
    --floating-panel-safe-area-background v1.0.0var(--floating-panel-background)-