Flag角标组件

2024-06-19 10:15:30首发，2周前更新

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

简单使用

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

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

居右

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

主题

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

类型

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

• triangle:三角旗帜
• circle：圆形旗帜
• horn：羊角造型书签旗帜

Attributes属性

名称	可选值	默认值	说明
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）

Methods方法

有组件通用的内置方法：

• set：设置组件属性，支持一个参数即被设置的属性值键值对{key，value}或其数组
• reset：重置组件属性，无参数
• clear：清除属性和值，无参数

基本用法：CompElem.reset();

Events事件

有组件通用的事件：

• connected：组件连接成功，无参数
• disconnected：组件断开连接，无参数
• adopted：组件被转移，无参数
• set：设置了属性，支持一个参数即设置的值
• cleared：清除了属性，无参数
• reset：重置了属性，无参数

基本用法：CompElem.on('connected',()=>{console.log('connected')});