Introduction

The bottom navigation component is used to quickly switch between different pages or feature modules. It supports icon-only, text-only, and icon-with-text display modes, integrates badge reminders, and fully adapts to the bottom safe area on full-screen devices.

Usage

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

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

Code Demo

Basic Usage

This demo shows the three modes required by the design specification: icon-only, text-only, and icon with text.

API

Properties

Property	Description	Type	Options	Default
list	Tab list data	Array	-	[]
current	Index of the currently active item	Number	-	0
activeColor	Text/icon color in the active state	String	-	#ff8000
inactiveColor	Text/icon color in the inactive state	String	-	#545861
fixed	Whether to fix the component to the bottom. When enabled, the safe area is handled automatically	Boolean	-	true
border	Whether to display the gray top divider	Boolean	-	true
zIndex	Element stacking level	Number	-	100

List Item Configuration

Property	Description	Type
text	Text content to display	String
icon	Icon name when inactive	String
activeIcon	Icon name when active. If not provided, icon is reused	String
dot	Whether to display a red dot badge	Boolean
badge	Numeric badge content to display	String/Number

Events

Event	Description	Callback Parameters
change	Triggered when an item is clicked to switch tabs

打开预览