fs-tag

About 895 wordsAbout 3 min

Introduction

The tag component is used to mark things, indicate attribute status, classify items, etc. It supports multiple themes, sizes, and variants, and supports custom icons, closable, and disabled states.

Usage

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

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

To use the long-press bubble feature, the page must also register the dialog-center component and place <dialog-center /> in the page wxml:
"usingComponents": {
  "fs-tag": "ava-ui/fxui/fs-tag/index",
  "dialog-center": "ava-ui/fxui/DialogCenter/DialogCenter"
}

<dialog-center />

Code Demonstrations

Theme (theme + variant combination)

The table below shows the combined effects of all themes (gray/blue/green/red/orange/magenta) and four variants (dark/light/outline/light-outline), fully aligned with the design specification:

dark: Dark background + white text, emphasizing the tag content.
light: Light background + theme color text, suitable for de-emphasized but distinguishable tags.
outline: Theme color border, transparent background, theme color text, suitable for emphasizing boundaries.
light-outline: Theme color light border, light background, theme color text, suitable for de-emphasized but distinguishable tags.

Type and Variant (variant property)

Custom Style (customStyle)

You can pass inline styles via the customStyle property to quickly customize the tag's background, color, border, rounded corners, etc.

Closable

The close button icon can be customized via the closeIcon property. The default value is 'guanbi2'; use icon names from the iconfont font library.

Long Press to Pop Up Bubble (bubbleOption)

After setting the bubbleOption property (not null), long-pressing the tag pops up a bubble. The bubble content defaults to the tag's text property value, and can also be overridden via bubbleOption.content.

Prerequisite: The page must register the dialog-center component and place <dialog-center />. See the usage description above for details.

API

Parameters

Parameter	Description	Type	Possible Values	Default
theme	Theme color	string	default/gray/blue/green /red/orange/magenta/yellow-green	'default' (theme color, recommended)
variant	Variant	string	dark/light/outline/light-outline	'dark'
size	Size	string	medium/large	'medium'
shape	Shape	string	square/round/mark	'round'
closable	Whether closable	boolean	—	false
closeIcon	Close button icon	string	fxui/common_css/iconfont icon name	'guanbi2'
disabled	Whether disabled	boolean	—	false
icon	Icon	string	—	—
text	Text content	string	—	''
customStyle	Custom style	string	—	''
maxWidth	Tag maximum width	string	Supports px, em, rem, percentage, etc. Inactive when empty or less than or equal to 0.	'240px'
bubbleOption	Long-press bubble config; disabled when `null`. Passed through to `fsBubbleDialog.show()`; `content` defaults to the `text` property value, `selector` is auto-injected by the component and does not need to be passed in manually.	object/null	—	null

Note: theme supports default (theme color, recommended), gray, blue, green, red, orange, magenta, yellow-green. default is the default theme; its color value stays consistent with the brand primary color and is suitable for most scenarios.

Slot

Name	Description
icon	Custom icon content

Events

Event Name	Description	Callback Parameters
click	Triggered when the tag is clicked	event
close	Triggered when close is clicked	event
longpress	Triggered when the tag is long-pressed (bubbleOption is not null)	event
bubbletap	Triggered when a bubble list item is clicked	`{ item }` same as fsBubbleDialog
bubbleclose	Triggered when the bubble is closed	—

Icon Notes

The icon property accepts icon names from the fxui/common_css/iconfont font library, such as star, guanbi2, jinbi, shoukuan, chexiao, shoucang, delete, like, sousuo, etc.
The close button uses the guanbi2 icon by default (<text class="fxui_all guanbi2"></text>).
You can also customize the icon via slot.

打开预览