FloatingBubble Floating Bubble


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.

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



ParametersDescriptionTypeDefault value
v-model:offsetControl bubble positionOffsetTypeDefault lower right corner coordinate
axisThe direction of dragging, xy means free dragging, lock means dragging prohibited'x' | 'y' | 'xy' | 'lock'y
magneticThe direction of automatic magnetic attraction'x' | 'y'-
iconBubble icon name or image link, equivalent to the name attribute of the Icon componentstring-
gapThe minimum distance between the bubble and the window, in pxnumber24


Event nameDescriptionCallback parameters
clickTriggered when the component is clickedMouseEvent
offset-changeTriggered when the position changes due to user dragging{x: string, y: string}


defaultCustomize 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.