Introduction

The tab component is used to switch between multiple content areas. It supports three styles (text/capsule/segment) with customizable background, shadow, and padding, suitable for page segmentation, filtering, and other scenarios. Combined with fs-tab-item, it supports horizontal/vertical layout, icons, badges, disabled state, and more.

Usage

For local registration, configure it in the index.json of the page or component that needs it:

"usingComponents": {
  "fs-tab": "avaui-sub/fs-tab/index",
  "fs-tab-item": "avaui-sub/fs-tab-item/index"
}

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-tab": "avaComponent://avaui-sub/fs-tab/index",
  "fs-tab-item": "avaComponent://avaui-sub/fs-tab-item/index"
}

Code Demos

Type (type property)

Layout (scroll, evenly split, more button, more menu)

Custom Background (tabBackground property)

Custom Background (tabBackground property)

Hide Bottom Line (hideLine property)

---

API

fs-tab Properties

Property	Description	Type	Optional Values	Default
value	Controlled selected value	string/number	—	—
type	Tab style	string	text/capsule/segment/outline-capsule	text
tabBackground	Background color/style	string	CSS background value (color/gradient/image, etc.)	—
hideLine	Whether to hide the bottom line	boolean	true/false	false
tabItemLayout	Item layout	string	evenly/auto	auto
tabItemMaxWidth	Maximum item width	string	—	120px
extStyle	External custom style	string	—	''
showMore	Whether to show the more button	boolean	true/false	false
moreButton	More button configuration	object	see below	{}
items	Tab item data (array)	array	see below	[]

fs-tab-item Properties

Property	Description	Type	Optional Values	Default
value	Option value	string/number	—	—
checked	Whether selected	boolean	true/false	false
disabled	Whether disabled	boolean	true/false	false
type	Type	string	text/capsule/segment/outline-capsule	text
icon	Icon configuration, supports string and object, see below	String/Object	—	''
badge	Badge configuration, supports string/number and object, see below	String/Number/Object	—	''
text	Text content	string	—	''
extStyle	External custom style	string	—	''
tapId	Click identifier	string	—	''

tapId note: The fs-tab component automatically sets a tapId for each fs-tab-item, named tab-item-{index} (index starts from 0). Developers can also manually set tapId to override the auto-generated identifier.

icon object properties

Property Name	Type	Default	Description
name	String	''	Icon name (supports iconfont class name and http link)
size	String/Number	24	Icon size
color	String	''	Icon color
extStyle	String	''	Icon external style

For more icon configuration options, see the fs-icon component docs

badge object properties

Property Name	Type	Default	Description
content	String/Number	''	Badge content, supports numbers and text
max	Number	99	Maximum displayed number; shows max+ when exceeded
type	String	'filled'	Badge type: filled (filled capsule) / outlined (outlined circle)
color	String	'#ff4444'	Badge color
dot	Boolean	false	Whether to show a small red dot
offset	Array	null	Badge position offset, e.g. [-10, 20] or ['10rpx', '8rpx']
contentStyle	String	''	Custom style for badge content

For more badge configuration options, see the fs-badge component docs

moreButton configuration

The moreButton object configures the behavior and style of the more button:

Property Name	Type	Default	Description
icon	string	'menu'	Button icon, supports icon font class name
showDefaultMenu	boolean	true	Whether to show the default dropdown menu
visible	boolean	true	Whether the button is visible

Events

fs-tab Events

Event Name	Description	Callback Parameters
change	Triggered on switch
moreClick	Triggered when the more button is clicked
ready	Triggered when the component initialization completes	None
scrollEnd	Triggered when scrolling ends	{ visibleIndexes }, where visibleIndexes is the array of indexes of all items within the visible area

fs-tab-item Events

Event Name	Description	Callback Parameters
change	Triggered on click

Slot

Component	Name	Description
fs-tab	default	tab-item list
fs-tab-item	default	Option content

---

Design Notes

• Supports text/capsule/segment styles; background, shadow, and padding are flexibly configurable.
• Supports horizontal/vertical, icons, disabled, badges, controlled/uncontrolled, and other scenarios.
• Selected state, disabled state, size, type, and other styles are customizable.
• Clear structure, easy to extend.

---

Preview

打开预览