Group Flex弹性标签组

2024-06-19 10:20:57首发，54年前更新

弹性组是tab头的一种形式，已经被集成在Tab组件模块使用；因其由css+html打造，当然也可以用在网页body部分的任何地方，也可以被其他自定义组件或模块打包引用。

前言

页签组主要用于板块内容的切换，他是Tab模块的一个重要组成部分。

简单构建页签组需要经过以下几步：

1. 先构建父子结构关系。
2. 父节点使用_group-flex样式类
3. 对子节点内容使用role=label容器包裹
4. 某子节点使用selected属性以凸显状态

弹性标签组有一个特征是指示灯会铺满整个子节点；另外必须使用role=label标签，该标签将撑满整个子节点。

简单使用

父子节点可以是任意标签；特别支持ul+li和ol+li结构。

禁用

对子节点追加disabled属性即可。

工具

role=tools表示工具节点，用户自定义的工具按钮可置入其中；通常我们会借助ax.createTools工具函数创建工具集。

对工具使用role=remove属性，我们将特别处理：鼠标移入标红。

使用tips

弹性页签允许使用role=tips标签，用于辅助说明。

弹性铺满

弹性页签是可以自动铺满的，可尝试使用弹性布局。

指示图形

页签前面支持置入三种指示图形：

• role=icon：字体图标
• role=disk：圆形图片
• role=cube：方形图片

自定义容器

弹性页签组通常不会单独使用，而需要跟其他模块或组件配合使用，例如Tab模块。

我们借助框架自带的样式来自定义一个带_group-flex的内容板块。