Heading板块标题组件
heading组件用来创建板块的标题,可用在页面的大板块中间,也可用在侧边栏的小版块中间,用来分隔上下板块,并表明本板块的主要内容。
前言
给页面的板块使用标题是常见的操作,使用本组件可以快速创建标题,保持良好的样式效果。
简单使用
ax-heading
标签加上label
属性即表示一个板块标题。
- 输出
- HTML
-
中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。
-
使用图标
icon
属性表示使用图标,可填写任意有效的图标类名。
- 输出
- HTML
-
中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。
-
使用图片
图片的属性有disk
、cube
和image
,其中disk是圆形图片,cube是方形图片,image是仅限高度的任意图片。
属性值填写图片地址。
icon、disk、cube、image他们四个属性是互斥的,请使用一个即可。
- 输出
- HTML
-
中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。
-
使用指示箭头
使用arrow
属性表示开启指示箭头,默认是指向右侧的箭头;如果需要自定义箭头图标,可对arrow填写有效的图标类名。
- 输出
- HTML
-
中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。
-
使用tips
属性tips
作为辅助内容添加在尾部,可以是任意文本,不要喧宾夺主便可。
- 输出
- HTML
-
中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。
-
主题风格
属性theme可设置标题风格,可选值有prim
、succ
、warn
、error
、issue
、info
和text
。
- 输出
- HTML
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')});