Lin UI

#
徽章 Badge

出现在按钮、图标旁的数字或文字标记。

# 显示徽标

通过设置show属性设置是否显示徽标。默认值为true。

# 示例代码

<l-badge value="10" show="{{true}}">
  <!-- 插槽内的内容位于徽标左下角 -->
  <image src="/images/icon.png" />
</l-badge>

# 数字徽标

通过value属性设置徽标内显示的内容。

通过mode属性设置徽标内显示的内容类型，可选值为number、text，默认值为number。

# 示例代码

<l-badge value="10">
  <!-- 插槽内的内容位于徽标左下角 -->
  <image src="/images/icon.png" />
</l-badge>

<l-badge value="文字" mode="text">
  <image src="/images/icon.png" />
</l-badge>

# 徽标形状

通过shape属性设置徽标形状，可选值为circle、horn，默认值为horn。

# 示例代码

<l-badge value="10" shape="circle">
  <!-- 插槽内的内容位于徽标左下角 -->
  <image src="/images/icon.png" />
</l-badge>

# 数字显示方式

通过number-type属性设置徽标内数字的显示方式。可选值为overflow、ellipsis、limit,默认值为overflow。

  • 设置number-type为overflow，超过max-count会显示为${max-count}+。通过max-count属性修改数字最大值，max-count默认值为99。
  • 设置number-type为ellipsis，超过max-count会显示为...。通过max-count属性修改数字最大值，max-count默认值为99。
  • 设置number-type为limit时数字大于1000显示为${value/1000}k。

height=100

# 示例代码

<l-badge value="100" max-count="99">
  <image src="/images/icon.png" />
</l-badge>
 
<l-badge value="1200" number-type="limit">
  <image src="/images/icon.png" />
</l-badge>

# 自定义徽标内容

可在微信小程序项目内的wxs文件中自定义内容格式化函数,具体用法可参考以下示例代码。Lin-UI也提供了内置的wxs格式化函数，具体用法参考Lin-UI的filter文档。

# 示例代码

<wxs src="../index.wxs" module="count" />
<l-badge value="count.overCount(100)">
  <image src="/images/icon.png" />
</l-badge>

//wxs文件
var countFlow = function(count) {
  if (count > 99) {
    var finalCount = '99++'
  }
  return finalCount
}

module.exports = {
  overCount: overCount
};

# 红点徽标

通过dot属性设置徽标为红点徽标。

TIP

dot属性权重大于value属性。

height=100

# 示例代码

<l-badge dot="{{true}}">
  <image src="/images/icon.png" />
</l-badge>

# 徽标属性

参数 说明 类型 可选值 默认值
show 是否显示徽标 Boolean ----- true
mode 徽标显示的内容类型 String number/text number
shape 徽标形状 String circle/horn horn
value 徽标显示的内容 String ---- ---
number-type 数字的显示方式 String overflow/limit/ellipsis overflow
max-count 数字最大值，超过最大值时显示${max-count}+ Number ----- 99
dot 是否为红点徽标 Boolean ----- false

# 徽标外部样式类

外部样式类名 说明 备注
l-class 覆盖徽标区域的外部样式类 ---

# 徽标插槽

插槽名称 说明 备注
- 自定义徽标左下角显示内容 ---

# 徽标事件

事件名称 说明 返回值 备注
bind:lintap 点击徽标时触发的事件 ---- --------

    ← 倒计时 Countdown →