Introduction

The bubble dialog component is wrapped around fs-bubble. You pass in the selector of the trigger element, and a bubble overlay with an arrow pointing to it pops up nearby (with fixed positioning). It supports four directions (up, down, left, right) and automatically closes when the area outside the bubble is clicked.

Usage

Local import. Configure it in the index.json of the page or component where it is needed:

"usingComponents": {
  "fs-bubble-dialog": "ava-ui/fxui/fs-bubble-dialog/index"
}

Code Demo

Basic Usage

API

Parameters

Parameter	Description	Type	Optional Values	Default
show	Controls whether the bubble is shown/hidden	Boolean	-	false
selector	Selector of the trigger element (e.g. #my-btn)	String	-	''
targetRect	Directly specifies the trigger element position (can replace selector), format {top, bottom, left, right, width, height}	Object	-	null
placement	Direction in which the bubble appears	String	top / bottom	top
offset	Spacing between the bubble and the trigger element (px)	Number	-	8
bgColor	Bubble background color	String	-	'#fff'
arrowColor	Arrow color, defaults to be the same as the background color	String	-	''
borderRadius	Corner radius	String	-	'8px'
padding	Inner padding	String	-	'8px 12px'
arrowSize	Arrow size (px)	Number	-	8
arrowOffset	Position of the arrow along the bubble edge	String	-	'50%'
customStyle	Custom bubble style	String	-	''
content	Bubble text content	String	-	''
contentColor	Text color of content	String	-	''
list	List content, format [{ label, value?, icon?, disabled? }], takes precedence over content	Array	-	[]
maskBgColor	Mask background color	String	-	'transparent'
zIndex	Z-index	Number	-	1000
minSpace	Minimum remaining space required for the preferred direction (px); automatically falls back when space is insufficient (top↔bottom)	Number	-	80
align	Horizontal alignment of the bubble relative to the trigger element	String	left / center / right	'center'

Events

Name	Parameter	Description
close	-	Triggered when the area outside the bubble (mask) is clicked. The parent component must set show to false in this callback.
open	-	Triggered after the bubble is expanded and positioning is calculated
list-tap	{ item, index }	Triggered when a list item is clicked (disabled items do not trigger this), and the bubble closes automatically

Slot

Slot is not supported yet. Pass text content via the content property instead.

Notes

• selector supports CSS selector syntax (such as #id, .class). Using an id selector is recommended to ensure uniqueness.
• When the bubble is above the trigger element (placement="top"), the positioning baseline is bottom; when it is to the left (placement="left"), the positioning baseline is right.
• If you use the targetRect property, you can bypass DOM queries. This is useful for manually passing in coordinates when the component is used inside complex hierarchies such as lists or dialogs.
• The component uses fixed positioning internally. It is recommended to use it directly at the page level to avoid being affected by a parent element's transform or overflow:hidden.

打开预览