Introduction

A bottom action bar component with a left-right layout. The left side is a customizable slot area, and the right side is a button list. It supports multiple button layout modes (left/right/center/justify). When the number of buttons exceeds the visible count, extra buttons are automatically collapsed into a "More" button.

Usage

Configure in the page or component's index.json:

{
  "usingComponents": {
    "fs-bottom-action-bar": "/avaui-sub/fs-bottom-action-bar/index"
  },
  "componentPlaceholder": {
    "fs-bottom-action-bar": "view"
  }
}

PWC (custom component/plugin) usage: only the usingComponents registration follows the format below (the avaComponent:// protocol); other usage is identical to local registration.

{
  "usingComponents": {
    "fs-bottom-action-bar": "avaComponent://avaui-sub/fs-bottom-action-bar/index"
  }
}

The component has built-in DialogCenter, so the page does not need to add it separately.

Code demo

---

API

Properties

Property	Description	Type	Default
buttons	Button list	array	[]
buttonLayout	Button layout: left left-aligned / right right-aligned / center centered / justify evenly distributed	string	'left'
buttonReverse	Whether to reverse button order (the More button is on the left)	boolean	false
showSafe	Whether to show the bottom safe area	boolean	true
hasTopLine	Whether to show the top divider	boolean	true
visibleCount	Number of visible buttons; extra buttons are collapsed into "More"	number	3
showAllBtnWhenMoreOnlyOne	Whether to expand all buttons directly when only 1 button remains in the More area	boolean	false
baseStyle	Additional container style	string	''
leftStyle	Additional left container style	string	''
rightStyle	Additional right container style	string	''
moreBtnInfo	Custom More button configuration (see below)	object	null

moreBtnInfo configuration

Property	Description	Type	Default
text	Button text	string	—
theme	Button theme	string	'default'
variant	Button variant	string	'outline'
size	Button size	string	Inherits the first visible button
icon	Icon class name	string	'titlebar_more_black'
btnStyle	Button style (defaults to width: 40px; height: 40px)	string	—
onClick	Click callback	function	—

buttons array item

Property	Description	Type	Default
text	Button text	string	—
theme	Theme: default / primary / warn	string	'default'
variant	Variant: base / outline / text	string	'base'
size	Size: micro / mini / small / medium / large	string	'small'
disabled	Whether disabled	boolean	false
icon	Icon class name	string	''
iconPosition	Icon position: left / right	string	'left'
shape	Shape: rect / square / round-rect / circle	string	'rect'
loading	Whether loading	boolean	false
btnStyle	Custom button style	string	''
textStyle	Custom text style	string	''
onClick	Button click callback (higher priority than the buttonClick event)	function	—

Events

Event	Description	Params
buttonClick	Button click	{ button, index }
bottomActionBarInfo	Component height change	{ height, width, top, bottom, left, right }

Slots

Slot	Description
left	Left content area

---

Usage examples

Basic usage

<fs-bottom-action-bar
  buttons="{{buttons}}"
  bind:buttonClick="onButtonClick">
  <view slot="left" class="user-info">
    <text>Left content</text>
  </view>
</fs-bottom-action-bar>

Page({
  data: {
    buttons: [
      { text: 'Edit', theme: 'primary', variant: 'base' },
      { text: 'Delete', theme: 'warn', variant: 'outline' }
    ]
  },
  onButtonClick(e) {
    const { button, index } = e.detail;
    console.log('Clicked:', button.text);
  }
});

Different layouts

<!-- Left-aligned (default) -->
<fs-bottom-action-bar buttons="{{buttons}}" buttonLayout="left" />

<!-- Right-aligned -->
<fs-bottom-action-bar buttons="{{buttons}}" buttonLayout="right" />

<!-- Centered -->
<fs-bottom-action-bar buttons="{{buttons}}" buttonLayout="center" />

<!-- Evenly distributed -->
<fs-bottom-action-bar buttons="{{buttons}}" buttonLayout="justify" />

Reverse order

<fs-bottom-action-bar buttons="{{buttons}}" buttonReverse="{{true}}" />

Custom visible button count

<!-- Show the first 2 buttons and collapse the rest into "More" -->
<fs-bottom-action-bar buttons="{{buttons}}" visibleCount="{{2}}" />

Expand all when only 1 button remains in the More area

<fs-bottom-action-bar
  buttons="{{buttons}}"
  visibleCount="{{3}}"
  showAllBtnWhenMoreOnlyOne="{{true}}" />

---

Notes

1. When the number of buttons exceeds visibleCount, the extra buttons are automatically collapsed into the actionsheet of the "More" button
2. The "More" button defaults to 40px × 40px; it keeps a fixed size in justify layout
3. The actionsheet callback uses res.idx rather than res.index
4. The component depends on fs-button and DialogCenter (both built in)
5. A button's onClick callback has higher priority than the component's buttonClick event

---

打开预览