fs-fab Floating Action Button Component

The Floating Action Button is a circular button that floats above the interface and is used to trigger the primary action.

Usage

Import it locally by configuring it in the index.json of the page or component where it is needed.

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

Code Demo

API

Properties

Property	Type	Default	Description
mainButton	Object	null	Main button configuration (controls expand/collapse)
buttons	Array	[]	Button configuration array
layout	String	'horizontal'	Button layout direction. Accepted values: vertical, horizontal
variant	String	'primary'	Style variant. Accepted values: primary, default
size	Number	40	Size, in px
extStyle	String	''	Custom style
position	Object	{bottom: 80, right: 16}	Position configuration
zIndex	Number	1000	z-index level. The main button level is zIndex+1

mainButton Object Configuration

The main button is used to control the expand/collapse state of child buttons. It supports the following properties:

Property	Type	Default	Description
icon	String	''	Icon name
img	String	''	Image URL, with higher priority than icon
imgStyle	String	''	Custom image style (inline style), such as width:24px;height:24px;border-radius:50%
text	String	''	Text content
variant	String	-	Style variant. Accepted values: primary, default. If not set, the component-level variant is used
extStyle	String	''	Custom style for a single button (inline style), overriding the component-level extStyle
disabled	Boolean	false	Whether disabled
loading	Boolean	false	Whether to show the loading state
id	String/Number	-	Button identifier (optional)
tapId	String	-	Tab identifier, used to generate the unique button ID

buttons Array Configuration

Each object in the buttons array supports the following properties:

Property	Type	Default	Description
icon	String	''	Icon name
img	String	''	Image URL, with higher priority than icon
imgStyle	String	''	Custom image style (inline style), such as width:24px;height:24px;border-radius:50%
text	String	''	Text content
variant	String	-	Style variant. Accepted values: primary, default. If not set, the component-level variant is used
extStyle	String	''	Custom style for a single button (inline style), overriding the component-level extStyle
disabled	Boolean	false	Whether disabled
loading	Boolean	false	Whether to show the loading state
id	String/Number	-	Button identifier (optional)
tapId	String	-	Tab identifier, used to generate the unique button ID

Events

Event Name	Description	Callback Parameters
click	Triggered when a button is tapped
toggle	Triggered when the expanded state changes in multi-button mode

position Object Description

Property	Type	Default	Description
bottom	Number	80	Distance from the bottom, in px
right	Number	16	Distance from the right, in px

Design Notes

• The floating action button is fixed at the bottom-right corner of the screen, 80px from the bottom and 16px from the right.
• Supports two modes:
  • Direct expanded mode: mainButton is not set, and buttons in the buttons array are displayed directly in the expanded state.
  • Expandable mode: mainButton is set, and the main button controls expand/collapse of the child buttons.
• Provides two style variants: primary (orange) and default (white).
• The fixed size is 40px. Icon + text buttons automatically adjust their width.
• Supports vertical and horizontal layout directions:
  • Vertical layout: child buttons expand sequentially from bottom to top.
  • Horizontal layout: child buttons expand sequentially from right to left.
• In expandable mode, child buttons use animation effects when expanded.
• Supports custom position, icons, text, and more.
• Includes tap feedback animation and shadow effects.
• Provides active-state feedback on tap, consistent with the Button component.

打开预览