fs-badge Badge Component

A badge component used to display a message count or status at the top-right corner of other components.

Usage

Import locally by configuring it in the index.json of the page or component that needs it.

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

Code Demos

Basic Usage

API

Properties

Property	Type	Default	Description
content	String/Number	''	Badge content, supports numbers and text
icon	String	''	Icon name (iconfont class name), e.g.: icon-star
max	Number	99	Maximum displayed number; values exceeding this show as max+
dot	Boolean	false	Whether to show a small red dot
type	String	'filled'	Badge type: filled (filled capsule) / outlined (outlined circle)
size	String	'medium'	Badge size: small (12px) / medium (16px) / large (20px)
color	String	'#ff4444'	Badge color
offset	Array	null	Set the position offset of the badge, e.g.: [-10, 20] or ['10rpx', '8rpx']
contentStyle	String	''	Custom style for the badge content
extStyle	String	''	External style

Slots

Slot Name	Description
default	Content wrapped by the badge

Usage Examples

Number Badge

<fs-badge content="5">
  <view class="target">Target element</view>
</fs-badge>

Text Badge

<fs-badge content="new">
  <view class="target">Target element</view>
</fs-badge>

Icon Badge

<fs-badge icon="icon-star">
  <view class="target">Target element</view>
</fs-badge>

Red Dot

<fs-badge dot>
  <view class="target">Target element</view>
</fs-badge>

Outlined Circle Style

<fs-badge content="5" type="outlined">
  <view class="target">Target element</view>
</fs-badge>

Different Sizes

<!-- Small size -->
<fs-badge content="5" size="small">
  <view class="target">Target element</view>
</fs-badge>

<!-- Medium size (default) -->
<fs-badge content="5" size="medium">
  <view class="target">Target element</view>
</fs-badge>

<!-- Large size -->
<fs-badge content="5" size="large">
  <view class="target">Target element</view>
</fs-badge>

Custom Color

<!-- Filled capsule style -->
<fs-badge content="3" color="#1890ff" type="filled">
  <view class="target">Target element</view>
</fs-badge>

<!-- Outlined circle style -->
<fs-badge content="3" color="#1890ff" type="outlined">
  <view class="target">Target element</view>
</fs-badge>

<!-- Icon badge with custom color -->
<fs-badge icon="icon-heart" color="#ff6b6b" type="filled">
  <view class="target">Target element</view>
</fs-badge>

<fs-badge icon="icon-star" color="#52c41a" type="outlined">
  <view class="target">Target element</view>
</fs-badge>

Maximum Value Limit

<fs-badge content="100" max="99">
  <view class="target">Target element</view>
</fs-badge>

Position Offset

<!-- Number offset -->
<fs-badge content="5" offset="{{[-10, 20]}}">
  <view class="target">Target element</view>
</fs-badge>

<!-- String offset -->
<fs-badge content="new" offset="{{['10rpx', '8rpx']}}">
  <view class="target">Target element</view>
</fs-badge>

<!-- Mixed offset -->
<fs-badge content="3" offset="{{[10, '5rpx']}}">
  <view class="target">Target element</view>
</fs-badge>

Custom Styles

<!-- Custom font size -->
<fs-badge content="5" contentStyle="font-size: 16px;">
  <view class="target">Target element</view>
</fs-badge>

<!-- Custom size and border radius -->
<fs-badge content="new" contentStyle="width: 40px; height: 20px; border-radius: 10px;">
  <view class="target">Target element</view>
</fs-badge>

<!-- Custom background and text color -->
<fs-badge content="3" contentStyle="background: linear-gradient(45deg, #ff6b6b, #feca57); color: white;">
  <view class="target">Target element</view>
</fs-badge>

<!-- Custom border style -->
<fs-badge content="1" type="outlined" contentStyle="border-width: 2px; border-style: dashed;">
  <view class="target">Target element</view>
</fs-badge>

打开预览