Flag角标
角标通常以悬浮的方式置于元素的四个角落,使用flag组件来定义一个角标,支持三种角标造型,支持多种主题颜色。
Flag旗帜标签
简单使用
在列表中,特别是带图片或视频的多媒体图文列表中,需要对信息做一个状态标记以突出这条信息的生命周期,这个标记通常放在左上角或右上角。本框架通过ax-flag
标签创建一个旗帜角标。
由于角标需要绝对定位,需要确保父元素使用了position=relative/absolute/fixed
属性。
- 输出
- HTML
-
NEW No.01OK No.02最新 No.03
-
居右
旗帜标签默认居左显示,让旗帜角标居于信息右侧,可追加属性placement=right
。
- 输出
- HTML
-
NEW No.01OK No.02最新 No.03
-
主题
默认主题颜色是主色,可通过theme
属性设置旗帜角标的主题颜色。可使用的主题色包括:prim(主色)、error、info、succ、issue、warn、text、ignore。
- 输出
- HTML
-
NEW No.01HOT No.02OK No.03警告 No.04疑问 No.05消息 No.06NEW No.07忽略 No.08
-
类型
角标默认是斜三角类型,可通过type
属性更换角标类型:
- triangle:三角旗帜
- circle:圆形旗帜
- horn:羊角造型书签旗帜
- 输出
- HTML
-
NEW No.01HOT No.02OK No.03NEW No.04HOT No.05OK No.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) |