Badge

Badge

demo 原始链接demo 源码编辑文档组件源码

badge - 图1

二维码

Badge是指通常出现在图标或文字右上角的红色圆点、数字或者文字,表示有新内容或者待处理的信息。中文一般称呼为小红点、角标或徽标。

  • 强提醒的使用场景。如果只需让用户了解有更新或新内容必然只有一条时,Badge无需标注具体数字,单纯的红点即可,例如微信公众号更新和App版本更新采用无数字类型。
  • 弱提醒的使用场景。如果需要让用户精确了解有多少条更新且新内容有多条,Badge可标注具体的数字,例如IM的未读消息、邮箱的未处理邮件。有数字的Badge给用户带来的心理压力会更大,也会更吸引用户注意力。
  • 注意数字的长度和上限。对于有数字的Badge,由于界面显示空间有限,因此要注意视场景和信息类型决定数字最长显示多少位,如果数字达到上限该如何显示。
  • 谨慎在设计图标时内运用红色圆点元素。红色小圆点这个视觉元素已经成为一种社会性语义符号,即用户看到红色小圆点就会认为这代表着有新内容,因此图标设计应当谨慎使用红色圆点。

badge - 图2

Install

安装

局部注册

全局注册

  1. import { Badge } from 'vux'
  2. export default {
  3. components: {
  4. Badge
  5. }
  6. }

  1. // 在入口文件全局引入
  2. import Vue from 'vue'
  3. import { Badge } from 'vux'
  4. Vue.component('badge', Badge)

API

属性

名字类型默认值说明版本要求
textstring显示的文字

Variables

## 样式变量


名字默认值说明继承自变量
@badge-bg-color #f74c31 badge的背景颜色

贡献者

贡献者

该组件(包含文档)迭代次数 11,贡献人数 2
ftium4airyland

Changelog

发布日志

  • v2.3.3 [feature] 支持没有指定文字时为 红点 样式
  • v2.2.1-rc.2 [fix] 修复个位数字样式不正确 #1223

参考资料