Badge徽章

AX-BADGE自定义标签可以创建一个彩色的小气泡,用来存放某个元素隐含的信息数量,如果badge没有值将直接以dot小红点显示。

前言

徽章通常用来表示新信息、新动态;如果信息很少则用小点表示,如果信息很多则追加数字(尾部可使用+)。badge可以在小点和数字徽章之间切换。

徽章内容可以写在label属性上,也可以直接写在标签内部。

  • 输出
  • HTML
  • 2
  •                 
                    
                

颜色

徽章默认为红色,通过使用theme属性实现更多颜色的徽章:prim、error(默认)、succ、info、warn、issue、text、brief和ignore。

  • 输出
  • HTML
  • 2 New Hot 推荐 2 1 21 65 10+ 10+ 4 4 7
  •                 
                    
                

镂空徽章

徽章默认是实底填充的,如果需要镂空线条化的徽章可追加type=seal属性。

  • 输出
  • HTML
  • 2 New Hot 推荐 2 1 21 65 10+ 10+ 4 4 7
  •                 
                    
                

透明徽章

徽章默认是非透明的,如果需要让徽章变成半透明状态可叠加在深色的元素上面,可追加glassy属性。

对于实底徽章,半透明对prim、succ、error、info、issue、warn和text主题有效;对于镂空徽章都有效。

  • 输出
  • HTML
  • 2 New Hot 推荐 2
  •                 
                    
                

外型轮廓

徽章外型轮廓默认是圆角(round)的,可通过属性shape使用square(方形)、radius(小圆角)和drop(水滴)轮廓。

  • 输出
  • HTML
  • 14 65 2 200+ 14 65 2 200+
  •                 
                    
                

徽章图标

本框架的图标字体自带了若干徽章图标:

  • _icon-badge-new:new图标
  • _icon-badge-hot:hot图标
  • _icon-badge-vip:vip图标
  • 输出
  • HTML
  •