Introduction

The bubble component is used to display content with an arrow pointer. It is commonly used in scenarios such as chat messages and tooltip popovers. It supports customizable direction, color, border radius, and other styling options.

Usage

Import locally by configuring it in the index.json of the page or component that needs it.

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

Code Demo

Basic Usage

API

Parameters

Parameter	Description	Type	Optional Values	Default
direction	Arrow direction	String	'left', 'right', 'top', 'bottom'	'right'
bgColor	Background color	String	-	'#fff'
arrowColor	Arrow color, defaults to the background color	String	-	''
borderRadius	Border radius	String	-	'8px'
padding	Inner padding	String	-	'8px 12px'
maxWidth	Maximum width	String	-	'60%'
margin	Outer margin	String	-	'12px'
arrowSize	Arrow size (px)	Number	-	10
arrowOffset	Arrow offset (distance from the edge)	String	-	'20%'
justifyContent	Horizontal alignment of the bubble relative to its parent container	String	-	-
customStyle	Custom style	String	-	''

Slot

Name	Description
-	Custom bubble content

打开预览