选项卡
1. 组件概述
Section titled “1. 组件概述”选项卡是一个布局容器组件，用于在同一区域内组织多个内容面板，通过标签页切换的方式展示不同内容。用户点击不同的选项卡标题，即可切换显示对应的内容区域。选项卡可以有效地将相关但不同类别的内容进行分组，减少页面滚动，让用户更方便地找到所需信息。
加载中...
查看 JSON
复制 JSON
2. 应用场景示例
Section titled “2. 应用场景示例”-
场景一：AI 学习助手的多功能界面。在一个学习辅导应用中，使用选项卡将”提问答疑”、“知识点总结”、“练习测试”三个功能模块分开展示。用户可以在不同选项卡之间切换，每个选项卡内放置对应功能的输入组件和展示组件，实现一个页面承载多种学习功能。
-
场景二：诗歌鉴赏应用的内容分类。在诗歌鉴赏类应用中，使用选项卡将”原文展示”、“译文解析”、“AI 赏析”分成三个标签页。用户输入诗词后，可以通过切换选项卡查看不同维度的内容，每个选项卡绑定不同的变量来展示工作流返回的对应结果。
加载中...
查看 JSON
复制 JSON
3. 功能配置
Section titled “3. 功能配置”| 配置项 | 说明 |
|---|---|
| 绑定变量 | 选项卡组件的变量名。当用户切换选项卡时，该变量的值会更新为当前选中选项卡的”变量值”。其他组件可以绑定此变量来获取当前选中的选项卡信息，工作流也可以读取或修改此变量来控制选项卡的切换。 |
| 标题提示 | 开启后，当鼠标移动到选项卡标题上时会弹出完整的标题文字提示。适用于选项卡标题较长被截断的情况，方便用户查看完整标题。仅在部分展示形式下生效。 |
| 可关闭选项卡 | 开启后，每个选项卡标题旁会显示关闭按钮，用户可以点击关闭不需要的选项卡。适用于需要动态管理选项卡数量的场景。注意：单个选项卡内的关闭设置优先级更高。 |
选项卡折叠组
Section titled “选项卡折叠组”| 配置项 | 说明 |
|---|---|
| 选项卡列表 | 配置选项卡的各个标签页。可以添加、删除、拖拽排序选项卡。每个选项卡包含以下配置： - 选项名称：选项卡标题栏上显示的文字，如”基本信息”、“详细设置”等。 - 变量值：当该选项卡被选中时，绑定变量会被设置为此值。默认与选项名称相同，也可以自定义为不同的值，方便在工作流中识别当前选中的是哪个选项卡。 |
| 配置项 | 说明 |
|---|---|
| 添加事件 | 支持”选项卡切换”和”选项卡删除”两种触发事件。 - 选项卡切换：用户点击切换到不同选项卡时触发。可以用来在切换时执行特定操作，如调用工作流加载对应选项卡的数据。 - 选项卡删除：用户关闭某个选项卡时触发（需开启”可关闭选项卡”）。可以用来在删除前进行确认或执行清理操作。 |
| 配置项 | 说明 |
|---|---|
| 展示形式 | 选项卡的视觉样式，不同形式适用于不同的界面风格： - 默认：标准的选项卡样式。 - 线型：选项卡标题下方有线条指示当前选中项，简洁现代。 - 简约：更加简洁的样式，适合内容为主的页面。 - 加强：视觉效果更突出的样式。 - 卡片：每个选项卡呈现为卡片形式，有明显的边界感。 - 仿 Chrome：类似浏览器标签页的样式。 - 水平铺满：选项卡标题平均分布占满整行宽度。 - 选择器：以按钮组的形式展示选项卡。 - 垂直：选项卡标题垂直排列在左侧或右侧。 - 侧边栏：以侧边导航栏的形式展示选项卡。 |
| 标题区位置 | 当展示形式为”侧边栏”时可用。设置选项卡标题区域显示在左侧还是右侧。 |
标题样式折叠组
Section titled “标题样式折叠组”| 配置项 | 说明 |
|---|---|
| 宽度 | 设置选项卡标题的宽度。 |
| 文字 | 设置选项卡标题的字体样式，包括字号、颜色、粗细等。支持设置不同状态下的样式：默认、悬停、选中、禁用。 |
工具栏样式折叠组
Section titled “工具栏样式折叠组”| 配置项 | 说明 |
|---|---|
| 基本样式 | 设置选项卡工具栏区域的样式，包括内边距、外边距、背景色、边框、圆角、阴影等。工具栏位于选项卡标题区域的右侧，可以放置按钮等操作组件。 |
内容区样式折叠组
Section titled “内容区样式折叠组”| 配置项 | 说明 |
|---|---|
| 基本样式 | 设置选项卡内容区域的样式，包括内边距、外边距、背景色、边框、圆角、阴影等。内容区是显示各选项卡具体内容的区域。 |
自定义样式折叠组
Section titled “自定义样式折叠组”| 配置项 | 说明 |
|---|---|
| 自定义样式 | 通过 CSS 代码对选项卡的各个部分进行精细化样式控制。提供了选项卡基本样式、工具栏样式、标题样式、内容区样式等多个选择器，适合有 CSS 基础的用户进行深度定制。 |
| 配置项 | 说明 |
|---|---|
| 关联数据 | 绑定一个数组类型的变量，选项卡会根据数组中的数据动态生成多个选项卡。适用于选项卡数量不固定、需要根据数据动态生成的场景，如根据用户的学习科目列表动态生成对应的选项卡。 |
| 激活时渲染内容 | 开启后，只有当某个选项卡被选中时才会渲染其内容区域。可以提升页面初始加载性能，特别是当选项卡内容较多或较复杂时建议开启。默认开启。 |
| 隐藏后销毁内容 | 开启后，当切换到其他选项卡时，当前选项卡的内容会被销毁。再次切换回来时内容会重新渲染。适用于需要每次切换都重新获取最新数据的场景，如选项卡内有需要实时刷新的数据展示。 |
| 配置项 | 说明 |
|---|---|
| 可见 | 控制整个选项卡组件是否显示。可以设置为始终可见，或根据条件动态控制。 |
| 隐藏 | 控制整个选项卡组件是否隐藏。与”可见”相反。 |
| 禁用 | 控制整个选项卡组件是否禁用。禁用后所有选项卡都不可点击切换。 |