--- id: "tabs" title: "页内标签" category: "容器组件" document_type: "component-specification" spec_status: "local-current-draft" element_ui: "2.15.6" vue: "2.6.14" page: "../index.html#spec-tabs" source_data: "../component-data.json" official_components: ["tabs", "tab-pane"] template_components: [] scenario_count: 5 verification: "scenario-checklist-not-full-test-pass" --- # 页内标签 专题 `tabs` · 容器组件 · Element UI 2.15.6 ## 适用范围与组件映射 公共色板及字体基线适用于整个运营后台。本库整理基础组件、组件状态和可复用的组合模式；本轮补齐表单整体验证、页面布局和导航组合；具体业务字段与跨页流程仍在业务场景中说明。专题验收清单包含接入要求，不表示当前示例已实现或已验证全部场景。 官方条目映射：`tabs`、`tab-pane`。 ## 通用基线 - 组件库：Element UI **2.15.6**；运行样例 Vue **2.6.14**。 - 系统中文字体：macOS 优先苹方，Windows 通常微软雅黑；工程顺序固定为 `"PingFang SC", "Microsoft YaHei", sans-serif`。不要求安装或加载网络字体，兼容回退不是另一套可选样式。 - 后续仅采用经验证且固定版本的兼容 Element UI 2.x；Element Plus 属于独立迁移路线。 - 正文、数据值、输入及已选值：`14px / 400 / 21px`，`#303133`。 - 表头及组件分组标题：`14px / 600 / 21px`；弹窗标题：`16px / 600 / 24px`，均使用 `#303133`。 - 辅助说明：`12px / 400 / 18px`，`#595959`；错误、链接、状态、禁用与占位按各自语义处理。 - 适用组件的默认尺寸为 `small / 32px`；不得将这一高度机械应用于表格、文本域、浮层等全部组件。 - 规范正文与场景说明使用 `14px / 400 / 24px`、`#303133`，不降成灰蓝小字。 - 筛选文本输入占位统一“请输入”；未选择下拉统一“请选择”；默认全部的下拉显示“全部”。字段标签保留业务含义；日期保留开始/结束语义。 - 次级文字操作（查看更多、编辑、详情、数据中心、更多）：`12px / 400 / 18px`，`#3377BB`；保留点击热区。 - 本规范库的深色目录、蓝色展示区属于文档排版，不是业务组件颜色或业务导航规范。 ## 本页用法与分类 默认用法：普通页内同级切换默认使用顶部线条标签；确需明确页签边界时选卡片，需要独立包住标签和内容时选容器卡片。 | 区分什么 | 本页内容 | 选用或触发条件 | | --- | --- | --- | | 视觉：三种外观 | 线条、卡片、容器卡片改变标签与内容的边界组织。 | 普通切换用线条；并列工作区域用卡片；独立内容单元用容器卡片。同一类页面保持选定外观，不按当前状态临时换样式。 | | 布局：位置与溢出 | 标签方向与宽度不足时的滚动属于布局条件。 | 本页三种外观均采用顶部位置；标签较多时内部滚动。其他方向按真实空间需要另行验收，不是第四种外观。 | | 功能：内容与草稿 | 当前示例切换固定标签并保留本地草稿；新增、关闭与离开校验是额外功能。 | 当前示例不保存数据；需要动态标签或切走前校验时再接入，并明确关闭后的焦点、草稿和滚动策略。 | | 自动状态：当前与禁用 | 当前项由切换结果产生，禁用由该项是否可进入决定。 | 鼠标与左右方向键切换内容；制表键只定位。禁用项阻止进入，加载和失败在内容面板内表达，不改变整个标签条的外观。 | 使用边界：不把顶部排列、可关闭、禁用或溢出滚动与三种外观混为同一类选项；容器卡片外面不要重复套卡片。 ## 组件规则 - **TABS-R01**：仅用于内容区域内部的同级切换，不替代全局导航或侧边栏。默认线条标签；页内并列工作区域需要页签边界时用卡片标签；标签与内容需组成独立容器时用容器卡片。三种外观均使用顶部标签条。 - **TABS-R02**：切换面板保留各自草稿与滚动的策略由宿主明确；关闭标签不能误删数据。 - **TABS-R03**：制表键进入当前标签；左右方向键跳过禁用项并立即切换内容，起始键和结束键切换首尾。标签与面板有唯一关联；溢出滚动箭头有中文名称并支持回车键、空格键。 - **TABS-R04**：【公共用色】颜色仅从公共色值 引用：主色系 3 个基础色值、辅助功能色 3 个、中性色 10 个，共 16 个基础色值。角色可以多个，实际色值复用；不为每个组件、悬停 或不同字段再新增近似颜色。透明效果仅限遮罩 35% 与阴影 12%，从 外壳深色 派生。 - **TABS-R05**：【统一字体】统一系统中文字体：macOS 优先苹方（PingFang SC），Windows 通常使用微软雅黑（Microsoft YaHei）；工程顺序固定为 "PingFang SC", "Microsoft YaHei", sans-serif。使用设备已有字体，不要求安装或加载网络字体；最后一项仅作兼容回退，不是供页面作者任选的另一套样式。正文 14px/400/21px；表头与分组标题 14px/600/21px，弹窗标题 16px/600/24px；次级文字操作和辅助说明 12px/400/18px。正文与标题同用 #303133；不通过额外加粗或透明度改变正文轻重。 - **TABS-R06**：【叠加优先级】状态叠加规则：禁用阻断交互；输入类控件错误边框覆盖蓝色聚焦边框；输入框不叠加外圈或阴影，其他无边框操作保留键盘焦点提示；选中底覆盖悬停底；只读不等于禁用；加载不等于成功；业务启用/停用的文字结果不等于控件是否可点击。 - **TABS-R07**：【普通标签】文字正文深灰，容器白底和分隔灰；不为每个标签新增背景色。 - **TABS-R08**：【当前标签】三种外观的当前项均为操作蓝文字。线条标签用主题蓝下划线；卡片标签与容器卡片用白底当前页签和边界衔接内容，不额外画蓝色下划线、蓝底或勾选标记。 - **TABS-R09**：【悬停与键盘】可切换项悬停文字操作蓝；制表键定位只显示焦点，左右方向键按本例规则切换当前项与面板。键盘焦点用操作蓝轮廓，不改变字号或字重。 - **TABS-R10**：【禁用与内容反馈】禁用标签文字禁用灰并阻止切换；内容区的加载、空态和错误由内容组件表达，不把标签条整体染红。 - **TABS-R11**：【组件边界】页内标签只有当前项、非当前项、焦点及禁用；没有勾选、半选、表单触发框错误或按钮按下位移。 - **TABS-R12**：官方位置配置支持上、下、左、右；本项目默认顶部，具有明确左右结构才选侧置。动态新增/关闭工作页属于工作区导航，不能把普通页内标签自动变成可删除业务数据。 ## 场景与验收清单 以下为需核对的场景组；`[ ]` 不代表已经测试通过。 - [ ] **TABS-S01**：当前样例：三种外观各有两个内容标签和一个禁用标签，分别检查鼠标切换、方向键跳过禁用项、首尾定位及标签与面板的唯一关联。先从其他专题首次进入并核对当前线条标签的下划线，再检查搜索显示、直达链接、隐藏后重开及容器尺寸改变；下划线和溢出范围应由当前尺寸计算，不靠首次点击修复，不改变当前标签或草稿。 - [ ] **TABS-S02**：当前样例：线条适用于普通页内切换，卡片强调页签边界，容器卡片把标签和内容包含在一起；长标签示例仅演示溢出滚动状态。其他方向、延迟渲染及切换前校验仍为接入功能。 - [ ] **TABS-S03**：当前样例保留各外观中内容A的备注草稿，不执行保存。宿主接入可增删标签时，另行验收关闭后的焦点、草稿和滚动保持；页签自身没有输入错误边框。 - [ ] **TABS-S04**：共用视觉验收：仅核对本组件实际适用的颜色与组合状态；无此能力标为不适用，不给静态内容添加输入错误、半选或按下状态。 - [ ] **TABS-S05**：共用文字验收：正文14px/400、次级操作12px/400、标题600；检查实际子元素与弹出层。输入焦点只改自身边框，按钮和链接保留键盘焦点轮廓。 ### 专题验收重点 首次从侧栏、搜索或链接显示专题时，无须先切换标签，线条下划线就应按当前标签实测宽度显示，溢出箭头和当前项位置正确；隐藏后重新显示应重算尺寸。分别操作线条、卡片、容器卡片：鼠标与键盘切换内容、跳过禁用项；填写草稿后切走再返回，草稿保留。检查标签较多时内部滚动且不撑宽页面。 ## 当前示例模板 以下来自本专题的结构化示例，使用 Vue 2 模板语法。`v-model`、事件方法、数据列表等依赖 [components.js](../components.js)；完整样式文件及加载顺序见 [通用基线](FOUNDATIONS.md)。自定义组合标签的内部实现由下方依赖文件提供，不能仅复制标签作为完整组件。 ```html ``` ## 交付与使用边界 - 规范条款、示例代码与待验收场景分开理解；有示例不等于已覆盖所有样式、交互状态和使用场景。 - 业务接口、权限、时区、金额精度、数据规模等依赖应从实际项目读取，不使用演示值代替生产约定。 - 发生样式或文案变更时，同步专题数据、页面与 Markdown，避免规范和样例分离。 ## 来源与关联 - 来源线索：本次补充。 - [打开本专题页面](../index.html#spec-tabs) - [通用基线](FOUNDATIONS.md) - [规范总索引](README.md) - [结构化规范数据](../component-data.json)（记录 id：`tabs`） - [原始历史样板](../original-20260621.html) - [历史规范条目](../spec-notes.json) 自定义示例 `tabs-variants` 的实现：[container-variants.js](../container-variants.js)。 ## 本组件颜色状态表 | 状态 / 条件 | 统一规则 | | --- | --- | | 普通标签 | 文字正文深灰，容器白底和分隔灰；不为每个标签新增背景色。 | | 当前标签 | 三种外观的当前项均为操作蓝文字。线条标签用主题蓝下划线；卡片标签与容器卡片用白底当前页签和边界衔接内容，不额外画蓝色下划线、蓝底或勾选标记。 | | 悬停与键盘 | 可切换项悬停文字操作蓝；制表键定位只显示焦点，左右方向键按本例规则切换当前项与面板。键盘焦点用操作蓝轮廓，不改变字号或字重。 | | 禁用与内容反馈 | 禁用标签文字禁用灰并阻止切换；内容区的加载、空态和错误由内容组件表达，不把标签条整体染红。 | 页内标签只有当前项、非当前项、焦点及禁用；没有勾选、半选、表单触发框错误或按钮按下位移。 [公共颜色与字体 token](../color-tokens.json) · [公共组件样式](../color-contract.css) · [系统字体合同（最后加载）](../font-contract.css) ## 业务落地场景 - [存款记录 · 存款记录 · 数据页签](../../showcase/index.html#deposits) · [场景文档](../../showcase/docs/deposits.md) - [取款审核 · 待审核 / 审核记录页签](../../showcase/index.html#withdrawals) · [场景文档](../../showcase/docs/withdrawals.md) - [活动管理 · 编辑活动 · 多语言](../../showcase/index.html?example=tabs#campaigns) · [场景文档](../../showcase/docs/campaigns.md) - [广告管理 · 编辑广告 · 多语言内容](../../showcase/index.html#adverts) · [场景文档](../../showcase/docs/adverts.md) - [公告管理 · 编辑公告 · 多语言内容](../../showcase/index.html#notifications) · [场景文档](../../showcase/docs/notifications.md) - [通知管理 · 通知管理 · 列表与编辑中的内容切换](../../showcase/index.html#site-messages) · [场景文档](../../showcase/docs/site-messages.md) - [操作日志 · 系统日志 / 登录日志](../../showcase/index.html#logs) · [场景文档](../../showcase/docs/logs.md) - [运营总览 · 运营总览 · 报表与指标页签](../../showcase/index.html#overview) · [场景文档](../../showcase/docs/overview.md) - [个人中心 · 个人资料 / 账号安全](../../showcase/index.html#personal-center) · [场景文档](../../showcase/docs/personal-center.md) - [客服工单管理 · 待处理 / 处理中 / 历史记录](../../showcase/index.html#tickets) · [场景文档](../../showcase/docs/tickets.md) [竞品组件拆解](../../reference-review/竞品组件反推规范.html) · [业务场景分类](../../业务场景分类清单.md)