浮动气泡默认展示在右下角,并允许在 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}
/>
)
}
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
offset | 控制气泡位置 | OffsetType | 默认右下角坐标 |
axis | 拖拽的方向,xy 代表自由拖拽,lock 代表禁止拖拽 | x | y | xy | lock | y |
magnetic | 自动磁吸的方向 | x | y | - |
icon | 左侧图标或图片 | ReactNode | - |
gap | 气泡与窗口的最小间距,单位为 px | Number | 48 |
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
—floating-bubble-size | 96px | - |
—floating-bubble-initial-gap | 48px | - |
—floating-bubble-background | var(—blue, $blue) | - |
—floating-bubble-color | var(—white, $white) | - |
—floating-bubble-border-radius | 999px | - |
—floating-bubble-z-index | 999 | - |
—floating-bubble-duratio | 0.3s | - |
—floating-bubble-icon-size | 56px | - |