FloatingBubble Floating Bubble

introduce

Clickable bubbles that float at the edge of the page.

Code Demo

Basic usage

Floating bubbles are displayed in the lower right corner by default and allow dragging up and down in the y-axis direction. You can set the icon of the bubble through the icon property.

<z-floating-bubble icon="setting-fill" @click="onClick" />

import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const onClick = () => {
   toast.showToast('Click on the bubble')
}

Free drag and magnet attraction

Allows dragging in the x- and y-axis directions, and snaps to the nearest side in the x-axis direction.

<z-floating-bubble
   axis="xy"
   icon="setting-fill"
   magnetic="x"
   @offset-change="onOffsetChange"
/>

import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const onOffsetChange = (offset: any) => {
   toast.showToast(`x: ${offset.x.toFixed(0)}, y: ${offset.y.toFixed(0)}`)
}

Two-way binding

Use v-model:offset to control the position of the FloatingBubble.

<z-floating-bubble v-model:offset="offset" axis="xy" icon="chat" />

const offset = ref({ x: 200, y: 400 })

API

Props

Parameters	Description	Type	Default value
v-model:offset	Control bubble position	OffsetType	`Default lower right corner coordinate`
axis	The direction of dragging, `xy` means free dragging, `lock` means dragging prohibited	'x' \| 'y' \| 'xy' \| 'lock'	`y`
magnetic	The direction of automatic magnetic attraction	'x' \| 'y'	-
icon	Bubble icon name or image link, equivalent to the name attribute of the Icon component	string	-
gap	The minimum distance between the bubble and the window, in `px`	number	`24`

Events

Event name	Description	Callback parameters
click	Triggered when the component is clicked	MouseEvent
offset-change	Triggered when the position changes due to user dragging	{x: string, y: string}

Slots

Name	Description
default	Customize bubble display content

Theme customization

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

Name	Default	Description
--z-floating-bubble-size	96rpx	-
--z-floating-bubble-initial-gap	48rpx	-
--z-floating-bubble-icon-size	56rpx	-
--z-floating-bubble-background	var(--z-primary-color)	-
--z-floating-bubble-color	var(--z-background-2)	-
--z-floating-bubble-z-index	999	-
--z-floating-bubble-border-radius	--z-floating-bubble-border-radius	-