Group Lamp指示灯标签组
指示灯组是tab头的一种形式,已经被集成在Tab组件模块使用;因其由css+html打造,当然也可以用在网页body部分的任何地方,也可以被其他自定义组件或模块打包引用。
前言
指示灯组主要用于板块内容的切换,他是Tab模块的一个重要组成部分。
简单构建指示灯组需要经过以下几步:
- 先构建父子结构关系。
- 父节点使用
_group-lamp
样式类 - 对子节点内容使用
ref=label
容器包裹(不是必须) - 某子节点使用
selected
属性以凸显状态
简单使用
父子节点可以是任意标签;特别支持ul+li
和ol+li
结构。
- 输出
- HTML
-
div结构
读书看报玩手机旅行ul+li结构
读书看报玩手机旅行 -
禁用
对子节点追加disabled
属性即可。
- 输出
- HTML
-
div结构
读书看报玩手机旅行 -
工具
ref=tools
表示工具节点,用户自定义的工具按钮可置入其中;通常我们会借助ax.createTools
工具函数创建工具集。
对工具使用ref=remove
属性,我们将特别处理:鼠标移入标红。
更多内容
页签支持更多内容:
- ref=icon:字体图标
- ref=disk:圆形图片
- ref=cube:方形图片
- ref=tips:提示文字
- ax-badge标签:消息数量提示
- 输出
- HTML
-
北京2188万人哈尔988万人
3 乌鲁木齐407万人桂林496万人 -
自定义容器
指示灯组通常不会单独使用,而需要跟其他模块或组件配合使用,例如Tab模块。
我们借助框架自带的样式来自定义一个带_group-lamp
的内容板块。
- 输出
- HTML
-
读书看报玩手机旅行
中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。 -