Badge 徽标数

介绍

图标右上角的圆形徽标数字。

用法

基本引入

import { FQBadge } from '@fq/fq-weapp-ui';

组件依赖的样式文件（仅按需引用时需要）

import '@fq/fq-weapp-ui/dist/styles/components/badge.scss';

基础用法

<FQBadge count={5}>
  <View className='badge-placeholder' />
</FQBadge>

<FQBadge count={0} showZero>
  <View className='badge-placeholder' />
</FQBadge>

<FQBadge dot>
  <View className='badge-placeholder' />
</FQBadge>

<FQBadge
  count={<Image src='https://applet.ifengqun.com//fq-mall/prod/me/new-function-icon.png' 
  mode='widthFix' 
  style={{ width: '54rpx', height: '28.4rpx' }} />}
>
  <View className='badge-placeholder' />
</FQBadge>

独立使用

<FQBadge count={25} />
<FQBadge count={100} showZero />

封顶数字

<FQBadge count={99}>
  <View className='badge-placeholder' />
</FQBadge>

<FQBadge count={100}>
  <View className='badge-placeholder' />
</FQBadge>

<FQBadge count={99} overflowCount={10}>
  <View className='badge-placeholder' />
</FQBadge>

自定义位置偏移

<FQBadge count={5} offset={[16, 16]}>
  <View className='badge-placeholder' />
</FQBadge>

变体

<FQBadge count={5} type='solid'>
  <View className='badge-placeholder' />
</FQBadge>

<FQBadge count={5} type='outlined'>
  <View className='badge-placeholder' />
</FQBadge>

<FQBadge count={5} type='solid' styles={{ indicator: { borderColor: '#fff' } }}>
  <View className='badge-placeholder' />
</FQBadge>

<FQBadge count='有消息' type='solid' styles={{ indicator: { borderBottomLeftRadius: '0' } }}>
  <View className='badge-placeholder' />
</FQBadge>

自定义颜色

<FQBadge count={5} type='solid' color='#52C41A'>
  <View className='badge-placeholder' />
</FQBadge>

<FQBadge count={5} type='outlined' color='#52C41A'>
  <View className='badge-placeholder' />
</FQBadge>

<FQBadge dot color='#52C41A'>
  <View className='badge-placeholder' />
</FQBadge>

API

基础属性

参数	说明	类型	默认值	版本
color	自定义颜色	string	-
count	展示的数字	ReactNode	-
dot	不展示数字，只有一个小红点	boolean	false
offset	设置状态点的位置偏移，格式为 [left, top]，表示状态点距默认位置左侧、上方的偏移量。	[number, number]	-
overflowCount	展示封顶的数字值	number	99
showZero	当数值为 0 时，是否展示 Badge	boolean	false
styles	语义化结构 style	Record<SemanticDOM, CSSProperties>	-
type	徽标类型	solid / outlined	solid

SemanticDOM

参数	说明
root	根节点
indicator	指示器节点