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