HIPS-UNI-UI

# Badge 徽章

# 使用指南

import HipsBadge from '@hips/uni-ui/lib/badge';

export default {
  components: {
    'hips-badge': HipsBadge,
  },
};
1
2
3
4
5
6
7

# 跨平台支持

微信小程序 支付宝小程序 钉钉小程序 百度小程序 头条小程序 QQ 小程序
✔️ - - - - -

# 代码演示

# 基础用法

传入value值使badge显示对应的value内容

有四种type对应不同的颜色

使用badge组件作为容器的话，badge会浮于包裹内容的右上角，单独使用badge会横向显示

<hips-badge value="10">
  <button>回复</button>
</hips-badge>
<hips-badge value="10" type="primary">
  <button>评论</button>
</hips-badge>
<hips-badge value="10" type="warn">
  <button>回复</button>
</hips-badge>
<hips-badge value="10" type="success">
  <button>评论</button>
</hips-badge>
1
2
3
4
5
6
7
8
9
10
11
12

# 设置有最大值的徽章

传入max的值，会自动计算max与value的值，超过max的值会显示max+

<hips-badge value="100" max="99" size="small">
  <button>回复</button>
</hips-badge>
<hips-badge value="100" max="10">
  <button>评论</button>
</hips-badge>
1
2
3
4
5
6

# 自定义内容的徽章

value的值可以为数值或是字符串

<hips-badge value="add" color="#eee">
  <button>回复</button>
</hips-badge>
<hips-badge value="new" color="#666">
  <button>评论</button>
</hips-badge>
1
2
3
4
5
6

# 仅展示小红点

使用dot会使badge以圆点形式展示，不管传入的value是什么都会被忽略

<hips-badge dot value="10">
  <span>查询</span>
</hips-badge>
<hips-badge dot>
  <hips-icon name="star-o" />
</hips-badge>
1
2
3
4
5
6

# 其他用法

可以搭配group和cell组件一起使用,这里的badge不是作为容器使用的，所以它直接横向显示在父容器中

<hips-group>
  <hips-cell title="单元格" is-link>
    <hips-badge slot="value" value="20"></hips-badge>
  </hips-cell>
</hips-group>
1
2
3
4
5

# Badge API

参数 说明 类型 可选值 默认值
value 徽章内容 String | Number - -
type 徽章类型 String primary warn
max 最大值 String | Number - -
dot 是否以圆点形式展示 Boolean - false
hidden 是否显示 Badge Boolean - false
color 自定义背景颜色 String - -
size 设置大小 String small large

# 样式变量

变量名 说明 默认值
badge-color 文字颜色 white
badge-font-size 文字尺寸 24rpx
badge-border-color 边框颜色 white
badge-dot-size 圆点尺寸 16rpx
badge-primary-bg-color type=primary 时背景颜色 #1F8CEB
badge-success-bg-color type=success 时背景颜色 #48D2A0
badge-error-bg-color type=error 时背景颜色 #F96F68
badge-warn-bg-color type=warn 时背景颜色 #F5A623
badge-default-size-height size=default 时高度 36rpx
badge-default-size-font-size size=default 时文字大小 32rpx
badge-small-size-height size=small 时高度 30rpx
badge-small-size-font-size size=small 时文字大小 24rpx
badge-large-size-height size=large 时高度 42rpx
badge-large-size-font-size size=large 时文字大小 236rpx

注意

Spin 旋转提示