Badge 徽章
实体徽章
本框架一共定义了11
种颜色徽章,分别是ax-primary,ax-secondary,ax-success,ax-danger,ax-warning,ax-info,ax-ad,ax-light,ax-dark,ax-ignore,ax-white。默认是红色徽章。
默认没有对徽章进行绝对定位,用户根据需要自行设定css。
2
New
Hot
推荐
2
8
1
21
65
10+
10+
11
4
7
32
<span class="ax-badge">2</span> <span class="ax-badge ax-primary">New</span> <span class="ax-badge ax-danger">Hot</span> <span class="ax-badge ax-success">推荐</span> <span class="ax-badge ax-primary">2</span> <span class="ax-badge ax-secondary">8</span> <span class="ax-badge ax-success">1</span> <span class="ax-badge ax-danger">21</span> <span class="ax-badge ax-warning">65</span> <span class="ax-badge ax-info">10+</span> <span class="ax-badge ax-ad">10+</span> <span class="ax-badge ax-light">11</span> <span class="ax-badge ax-dark">4</span> <span class="ax-badge ax-ignore">7</span> <span class="ax-badge ax-white">32</span>
线体徽章
对ax-badge追加ax-border
即可定义线体徽章。
2
New
Hot
推荐
2
8
1
21
65
10+
10+
11
4
7
32
<span class="ax-badge ax-border">2</span> <span class="ax-badge ax-primary ax-border">New</span> <span class="ax-badge ax-danger ax-border">Hot</span> <span class="ax-badge ax-success ax-border">推荐</span> <span class="ax-badge ax-primary ax-border">2</span> <span class="ax-badge ax-secondary ax-border">8</span> <span class="ax-badge ax-success ax-border">1</span> <span class="ax-badge ax-danger ax-border">21</span> <span class="ax-badge ax-warning ax-border">65</span> <span class="ax-badge ax-info ax-border">10+</span> <span class="ax-badge ax-ad ax-border">10+</span> <span class="ax-badge ax-light ax-border">11</span> <span class="ax-badge ax-dark ax-border">4</span> <span class="ax-badge ax-ignore ax-border">7</span> <span class="ax-badge ax-white ax-border">32</span>
圆角徽章
ax-badge默认是圆形徽章,对ax-badge追加ax-radius
即可定义圆角徽章。
推荐
New
<span class="ax-badge ax-radius">推荐</span> <span class="ax-badge ax-border ax-radius">New</span>
水滴徽章
ax-badge默认是圆形徽章,对ax-badge追加ax-drop
即可定义水滴徽章。
推荐
New
<span class="ax-badge ax-drop">推荐</span> <span class="ax-badge ax-border ax-drop">New</span>
小点
本框架一共定义了11
种颜色小点,分别是ax-primary,ax-secondary,ax-success,ax-danger,ax-warning,ax-info,ax-ad,ax-light,ax-dark,ax-ignore,ax-white。默认是红色小点。
默认没有对红点进行绝对定位,用户根据需要自行设定css。
<span class="ax-dot"></span> <span class="ax-dot ax-primary"></span> <span class="ax-dot ax-secondary"></span> <span class="ax-dot ax-success"></span> <span class="ax-dot ax-danger"></span> <span class="ax-dot ax-warning"></span> <span class="ax-dot ax-info"></span> <span class="ax-dot ax-ad"></span> <span class="ax-dot ax-light"></span> <span class="ax-dot ax-dark"></span> <span class="ax-dot ax-ignore"></span> <span class="ax-dot ax-white"></span>