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