Introduction

The tag group component is a collection of multiple tags. It supports flow layout with automatic wrapping and displays up to a specified number of lines of tags. When the number of tags exceeds the maximum line count, a [More] button is automatically displayed; when the tags do not exceed the maximum line count, an [Edit] button is displayed. It supports multiple themes, sizes, and shapes, and supports custom styles. It is suitable for scenarios such as category display, attribute labels, and multi-selection.

Usage

Local import. Configure it in the index.json of the page or component where it is needed:

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

Code Demonstrations

Basic Usage

The tag group component supports both single-line and multi-line display, automatically laying out tags based on tag count and container width:

Single Line Display

When there are few tags, all tags are displayed in a single line, with an [Edit] button at the end:

• Suitable for scenarios with a small number of tags
• Automatically calculates tag spacing
• Edit button uses a circular icon button

Multi Line Display

When there are many tags, they automatically wrap across lines, displaying up to a specified number of lines:

• Supports displaying up to maxLines lines of tags (default 2 lines)
• Displays a [More] button when the maximum line count is exceeded
• Automatically calculates the number of tags that can be displayed per line

Custom Maximum Line Count

Customize the maximum number of lines to display via the maxLines property:

• Supports setting any number of lines
• Suitable for scenarios that need to display more tags
• Still displays a [More] button when the line count is exceeded

Expand Mode

Control whether to expand and display all tags via the expand property:

• In expand mode, all tags are displayed
• In non-expand mode, tags are displayed according to the maximum line count
• Suitable for scenarios that need to view all tags

Disabled State

Supports setting the disabled state of the tag group:

• Disable individual tags via tag_active
• Tags in disabled state are not clickable

API

Properties

Property	Description	Type	Possible Values	Default
tags	Tag array	array	—	[]
variant	Variant	string	dark/light/outline/light-outline	'light-outline'
size	Size	string	medium/large	'medium'
shape	Shape	string	square/round/mark	'round'
customStyle	Custom style	string	—	''
gap	Tag spacing (px)	number	—	4
maxLines	Maximum lines	number	—	2
expand	Whether to expand	boolean	—	false
bubbleOption	Bubble config	object	—	{}
enableShowAllPopup	Whether clicking the more button shows a popup with all tags	boolean	—	true

Size Specification

The tag group component provides two sizes; you can choose the appropriate size for different scenarios.

Size	Description	Tag height (px)	Edit button size (px)	Usage scenario
medium	Medium size (default)	22	22
large	Large size	24	24

Theme Color Description

The component supports multiple theme colors and automatically assigns theme colors to tags in a cycle:

• blue: Blue theme
• green: Green theme
• orange: Orange theme
• magenta: Magenta theme
• yellow-green: Yellow-green theme

Events

Event Name	Description	Callback Parameters
click	Triggered when a tag is clicked

Data Format

// Tag data format
const tagList = [
  {
    name: 'Tag 1',           // Tag text
    theme: 'magenta',        // Optional, theme color of an individual tag
    variant: 'light-outline', // Optional, variant of an individual tag
    size: 'large',           // Optional, size of an individual tag
    shape: 'round',          // Optional, shape of an individual tag
    icon: 'star',            // Optional, icon of an individual tag
    customStyle: '',         // Optional, custom style of an individual tag
    tag_active: true,        // Optional, whether an individual tag is active
    id: 'tag1'               // Optional, unique tag identifier
  },
  // ... more tags
]

Layout Logic

Automatic Layout Calculation

1. Container width calculation: The component automatically obtains the container width
2. Tag width calculation: Dynamically obtains the actual width of each tag
3. Wrap decision: Automatically decides whether to wrap based on container width and tag spacing
4. Visibility calculation: Calculates the number of tags that can be displayed within the maximum line count

Button Display Logic

• Edit button: Displayed when the tags do not exceed the maximum line count
• More button: Displayed when the tags exceed the maximum line count, replaced with a tag form
• Button style: The edit button uses a circular icon button, the more button uses the more icon

Theme Color Assignment

The component automatically assigns theme colors to tags in a cycle; theme colors cannot be customized:

1. Always uses the tag's own theme property
2. If not set, cycles through the default theme color array: magenta, orange, yellow-green, blue

Notes

• Ensure the container has sufficient width for correct layout calculation
• The component automatically handles tag wrapping and button show/hide
• The edit button uses a circular icon button with the outline variant
• The more button is replaced with a tag form and uses the more icon
• Supports controlling whether to expand and display all tags via the expand property
• Tags in disabled state will not trigger the click event
• The component internally calculates styles automatically, including size, color, layout, etc.
• The edit button icon uses obj-promotionobj, the more button icon uses more

打开预览