Heading板块标题组件

2025-03-12 18:57:40首发，1周前更新

heading组件用来创建板块的标题，可用在页面的大板块中间，也可用在侧边栏的小版块中间，用来分隔上下板块，并表明本板块的主要内容。

前言

给页面的板块使用标题是常见的操作，使用本组件可以快速创建标题，保持良好的样式效果。

简单使用

ax-heading标签加上label属性即表示一个板块标题。

使用图标

icon属性表示使用图标，可填写任意有效的图标类名。

使用图片

图片的属性有disk、cube和image，其中disk是圆形图片，cube是方形图片，image是仅限高度的任意图片。

属性值填写图片地址。

icon、disk、cube、image他们四个属性是互斥的，请使用一个即可。

使用指示箭头

使用arrow属性表示开启指示箭头，默认是指向右侧的箭头；如果需要自定义箭头图标，可对arrow填写有效的图标类名。

使用tips

属性tips作为辅助内容添加在尾部，可以是任意文本，不要喧宾夺主便可。

主题风格

属性theme可设置标题风格，可选值有prim、succ、warn、error、issue、info和text。

Attributes属性

名称	语义类型	可选值	默认值(运行时)	说明
icon	string	''	''	图标类名
disk	string	''	''	圆形图片地址
cube	string	''	''	方形图片地址
image	string	''	''	普通图片地址
arrow	string/boolean	-	false	是否启用指示箭头
label	string	''	''	主标题文本
tips	string	''	''	辅助提示文本
theme	string	'prim'/'error'/'succ'/'info'/'issue'/'warn'/'text'	''	主题风格

Methods方法

有组件通用的内置方法：

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

基本用法：CompElem.reset();

Events事件

有组件通用的事件：

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

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