Badge 徽章

使用指南

在 index.json 中引入组件

  1. {
  2.   "usingComponents": {
  3.     "zan-badge": "path/to/zanui-weapp/dist/badge/index"
  4.   }
  5. }

代码演示

基础用法

  1. <view class="badge-container">
  2.   <zan-badge>10</zan-badge>
  3. </view>

自定义参数

  1. <view class="badge-container">
  2.   <zan-badge
  3.     color="{{ color }}"
  4.     background-color="{{ backgroundColor }}"
  5.     font-size="{{ fontSize }}"
  6.     box-shadow="{{ boxShadow }}"
  7.   >10</zan-badge>
  8. </view>
  1. .badge-container {
  2.   width: 100px;
  3.   height: 100px;
  4. }

API

参数 说明 类型 默认值
color 字体颜色 String #fff
background-color 背景颜色 String #f44
font-size 字体大小 Number 10
box-shadow 为了更好的控制宽度，使用了box-shadow来实现badge的边框，可以根据box-shadow的语法自行修改颜色和宽度 String 0 0 0 2px #fff

Badge 徽章 - 图1
微信扫一扫

原文:

https://www.youzanyun.com/zanui/weapp#/zanui/view/badge