• Vant React

FloatingBubble 浮动气泡

介绍

悬浮在页面边缘的可点击气泡。

引入

import { FloatingBubble } from "@taroify/core"

代码演示

基础用法

浮动气泡默认展示在右下角,并允许在 y 轴方向上下拖拽,你可以通过 icon 属性设置气泡的图标。

function BasicFloatingBubble() {
  const onClick = () => {
    showToast({
      title: "点击气泡",
      icon: "none",
      duration: 1000,
    })
  }

  return <FloatingBubble icon={<ChatOutlined />} onClick={onClick} />
}

自由拖拽和磁吸

允许 x 和 y 轴方向拖拽,吸附到 x 轴方向最近一边。

function CustomFloatingBubble() {
  const onOffsetChange = (x: number, y: number) => {
    showToast({
      title: `x: ${x.toFixed(0)}, y: ${y.toFixed(0)}`,
      icon: "none",
      duration: 1000,
    })
  }

  return (
    <FloatingBubble
      axis="xy"
      magnetic="x"
      icon={<ChatOutlined />}
      onOffsetChange={onOffsetChange}
    />
  )
}

API

Flex Props

参数说明类型默认值
offset控制气泡位置OffsetType默认右下角坐标
axis拖拽的方向,xy 代表自由拖拽,lock 代表禁止拖拽x | y | xy | locky
magnetic自动磁吸的方向x | y-
icon左侧图标图片ReactNode-
gap气泡与窗口的最小间距,单位为 pxNumber48

Events

事件名说明回调参数
onClick点击组件时触发ITouchEvent
onOffsetChange由用户拖拽导致位置改变后触发x: string, y: string

主题定制

样式变量

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

名称默认值描述
—floating-bubble-size96px-
—floating-bubble-initial-gap48px-
—floating-bubble-backgroundvar(—blue, $blue)-
—floating-bubble-colorvar(—white, $white)-
—floating-bubble-border-radius999px-
—floating-bubble-z-index999-
—floating-bubble-duratio0.3s-
—floating-bubble-icon-size56px-