面包屑 · Tabs
页面层级的两件基础工具：面包屑说明"我在哪"，Tabs 在同一视图里切换内容分组。本页演示 3 种面包屑、4 种 Tabs 与页内锚点目录。所有切换都由 nexus.js 接管，标记里只写 data 属性。
面包屑 Breadcrumb
.crumbs / .sep / .now三种分隔风格：符号、斜线、层级式。除最后一级外全部可点击，最后一级用 .now 加粗且不可点。
细分隔符用「›」，视觉重量最轻，适合 3–5 级深度的后台页面。
斜线版更贴近文档与知识库的路径语义，等宽字体下可读性更好。
详情页常用：左侧返回按钮把"回退"变成一次显式点击，右侧保留完整路径。
层级超过 5 级时折叠中段，点击省略号展开被折叠的层级。
素材库 · 设计资源
标题行左侧放路径、右侧放主操作，是内容型后台最常见的组合。
Tabs 内容切换
[data-tabs] / .tab / .tabpane容器加 data-tabs，按钮写 data-tab="面板id"，面板放在容器同一个父级里并带对应 id，点击即切换 .on，切换逻辑在 nexus.js 中统一处理。
| 订单号 | 买家 | 金额 | 状态 |
|---|---|---|---|
| A20315 | 陈嘉明 | ¥1,299.00 | 待发货 |
| A20316 | 林思远 | ¥468.00 | 待付款 |
| A20317 | 赵一鸣 | ¥2,780.50 | 已完成 |
采用全粒面头层牛皮，鞋面经手工缝制，内衬为透气猪皮。中底使用双密度发泡材料，前掌回弹、后跟支撑分级设计。
自签收之日起 7 天无理由退换，30 天内出现开胶、断底等质量问题免费维修。真皮材质建议使用专用清洁膏，避免长时间浸水。
本周访问量 · 环比 +12.4%
本月访问量 · 环比 +8.1%
全年访问量 · 环比 -2.3%
Tabs 形态补充
segmented / 卡片头 Tabs分段控件不做内容切换，只表达当前筛选口径；[data-seg] 容器内的按钮点击自动切换 .on。
草稿箱是空的
创建页面后如果暂不发布，可以保存为草稿，这里会保留最近 30 天的版本。
页内锚点目录
.toc / #anchor长文档型页面（文章详情、词条、协议）用 .toc 做页内目录，点击跳转到对应锚点。header.php 已设置 scroll-padding-top:88px，跳转后标题不会被顶栏遮住。
一、产品概览
Nexus UI 是一套面向企业级中后台与电商场景的组件库，提供 97 个可直接打开的示例页面，覆盖设计基础、通用组件、浮层弹窗、数据展示、多媒体与 16 个行业模块。
1.1 定价策略
按团队规模分为个人版、团队版、企业版三档，均包含全部组件与源码，差异在于协作人数、私有化部署与技术支持响应时长。
| 版本 | 席位 | 年费 |
|---|---|---|
| 个人版 | 1 | ¥ 0 |
| 团队版 | 最多 20 | ¥ 3,600 |
| 企业版 | 不限 | 按需报价 |
1.2 版本对比
个人版与团队版共享同一套设计令牌；企业版额外提供暗色主题定制、品牌色替换与组件白标。
二、接口说明
所有交互组件通过 data-* 属性声明行为，不需要在页面里写任何初始化脚本。下面是最常用的三个钩子。
<!-- 打开弹窗 --> <button data-ov-open="ovDemo">打开</button> <!-- 切换 Tabs --> <div class="tabs" data-tabs> <button class="tab on" data-tab="paneA">A</button> </div> <!-- 轻提示 --> <button data-toast="success">保存</button>