Group Page页签组

2024-06-19 10:23:12首发，54年前更新

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

前言

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

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

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

简单使用

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

禁用

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

工具

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

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

指示图形

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

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

更多内容

页签支持更多内容：

• role=icon：字体图标
• role=disk：圆形图片
• role=cube：方形图片
• role=tips：提示文字
• ax-badge标签：消息数量提示

自定义容器

指示灯组通常不会单独使用，而需要跟其他模块或组件配合使用，例如Tab模块。

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