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>