Flag角标

角标通常以悬浮的方式置于元素的四个角落,使用flag组件来定义一个角标,支持三种角标造型,支持多种主题颜色。
Flag旗帜标签

Flag旗帜标签

简单使用

在列表中,特别是带图片或视频的多媒体图文列表中,需要对信息做一个状态标记以突出这条信息的生命周期,这个标记通常放在左上角或右上角。本框架通过ax-flag标签创建一个旗帜角标。

由于角标需要绝对定位,需要确保父元素使用了position=relative/absolute/fixed属性。

  • 输出
  • HTML
    • NEWNo.01
    • OKNo.02
    • 最新No.03
  •                 
                    
                

居右

旗帜标签默认居左显示,让旗帜角标居于信息右侧,可追加属性placement=right

  • 输出
  • HTML
    • NEWNo.01
    • OKNo.02
    • 最新No.03
  •                 
                    
                

主题

默认主题颜色是主色,可通过theme属性设置旗帜角标的主题颜色。可使用的主题色包括:prim(主色)、error、info、succ、issue、warn、text、ignore。

  • 输出
  • HTML
    • NEWNo.01
    • HOTNo.02
    • OKNo.03
    • 警告No.04
    • 疑问No.05
    • 消息No.06
    • NEWNo.07
    • 忽略No.08
  •                 
                    
                

类型

角标默认是斜三角类型,可通过type属性更换角标类型:

  • triangle:三角旗帜
  • circle:圆形旗帜
  • horn:羊角造型书签旗帜
  • 输出
  • HTML
    • NEWNo.01
    • HOTNo.02
    • OKNo.03
    • NEWNo.04
    • HOTNo.05
    • OKNo.06
  •                 
                    
                

Attributes属性

ax-flag为自定义标签,其包含的属性如下:

名称 可选值 默认值 说明
type triangle/circle/horn 'triangle' 角标类型,默认triangle(三角),circle为圆形角标,horn为羊角书签
theme prim/error/succ/info/warn/issue/text/ignore 'prim' 角标的颜色主题,默认为主色(prim)
label '' - 角标的文本
placement left/right 'left' 角标所在位置,默认在左侧(left)