Group Flex弹性标签组
弹性组是tab头的一种形式,已经被集成在Tab组件模块使用;因其由css+html打造,当然也可以用在网页body部分的任何地方,也可以被其他自定义组件或模块打包引用。
前言
页签组主要用于板块内容的切换,他是Tab模块的一个重要组成部分。
简单构建页签组需要经过以下几步:
- 先构建父子结构关系。
- 父节点使用
_group-flex
样式类 - 对子节点内容使用
role=label
容器包裹 - 某子节点使用
selected
属性以凸显状态
弹性标签组有一个特征是指示灯会铺满整个子节点;另外必须使用role=label
标签,该标签将撑满整个子节点。
简单使用
父子节点可以是任意标签;特别支持ul+li
和ol+li
结构。
- 输出
- HTML
-
div结构
北京天安门广场看升旗哈尔滨赏冰雕乌鲁木齐穿越草原桂林乘竹筏游漓江ul+li结构
北京天安门广场看升旗哈尔滨赏冰雕乌鲁木齐穿越草原桂林乘竹筏游漓江 -
禁用
对子节点追加disabled
属性即可。
- 输出
- HTML
-
北京天安门广场看升旗哈尔滨赏冰雕乌鲁木齐穿越草原桂林乘竹筏游漓江
-
工具
role=tools
表示工具节点,用户自定义的工具按钮可置入其中;通常我们会借助ax.createTools
工具函数创建工具集。
对工具使用role=remove
属性,我们将特别处理:鼠标移入标红。
使用tips
弹性页签允许使用role=tips
标签,用于辅助说明。
- 输出
- HTML
-
北京2188万人哈尔988万人乌鲁木齐407万人桂林496万人
-
弹性铺满
弹性页签是可以自动铺满的,可尝试使用弹性布局。
- 输出
- HTML
-
北京2188万人哈尔滨988万人乌鲁木齐407万人桂林496万人
-
指示图形
页签前面支持置入三种指示图形:
- role=icon:字体图标
- role=disk:圆形图片
- role=cube:方形图片
- 输出
- HTML
-
北京2188万人
哈尔988万人
乌鲁木齐407万人
桂林496万人 -
自定义容器
弹性页签组通常不会单独使用,而需要跟其他模块或组件配合使用,例如Tab模块。
我们借助框架自带的样式来自定义一个带_group-flex
的内容板块。
- 输出
- HTML
-
北京2188万人哈尔988万人乌鲁木齐407万人桂林496万人中国,是以华夏文明为源泉、中华文化为基础,并以汉族为主体民族的多民族国家,通用汉语、汉字,汉族与少数民族被统称为“中华民族”,又自称为炎黄子孙、龙的传人。
-