由页面以纯 HTML 打开并书写内容。 ========================================================================= -->

通用组件 / 08

步骤条 · 分页

流程型页面的两个进度指示器：步骤条告诉用户"走到第几步"，分页控制"一次看多少条"。本页演示 3 种步骤条、3 种分页、上下页按钮与表格分页组合。

步骤条 Steps

.steps / .step.done / .step.now / .step-n

① 默认 · 已完成与进行中

选择商品已加入购物车

填写地址上海市浦东新区

确认订单核对金额与发票

完成支付支持多种支付方式

已完成节点填实心圆并点亮连接线（.step.done），当前节点用 2px 描边（.step.now），未开始节点保持灰色描边。

② 带图标 · 已提交审核

提交素材18 个文件 · 46.2 MB

安全校验未发现敏感信息

人工复核预计 2 小时内完成

上线发布自动生成 CDN 链接

在 .step-n 里放 15px 的线性图标即可，图标颜色跟随节点状态，无需额外类。

③ 垂直步骤条

需求评审2026-09-28 · 产品与设计已确认

视觉定稿2026-10-01 · 设计令牌已同步

开发联调进行中 · 已完成 12 / 18 个页面

验收上线待开始

纵向布局用 .step-n 数字圆 + 1px 竖线；已完成段竖线换成反色，与横向步骤条语义一致。

步骤条 · 紧凑与可点击

紧凑型（只保留序号与标题）

选规格

填信息

付定金

收尾款

可点击型（点击节点查看该步说明）

预算不足或流程不可逆时，把后续节点渲染为 disabled 按钮，用户点不动也就不会再问"为什么跳不过去"。

分页 Pagination

.pager / .pager-info / .pager-btns / .pg

① 完整分页 · 表格底部

素材名称	类型	体积	上传时间
hero-banner-01.png	图片	2.4 MB	2026-10-03 09:12
product-shot-08.jpg	图片	1.1 MB	2026-10-03 08:47
promo-video-v3.mp4	视频	86.4 MB	2026-10-02 21:30
icon-sprite.svg	矢量	86 KB	2026-10-02 16:05

② 迷你分页 · 上下页

或

列表型页面最实用的组合：左侧总条数，右侧每页条数 + 上下页，只有两三个控件。

③ 加载更多 · 追加式分页

2026 秋季新品拍摄样片

更新于 12 分钟前 · 24 张

门店橱窗陈列参考

更新于 1 小时前 · 18 张

品牌 VI 延展素材

更新于昨天 · 36 张

点击后按钮进入加载态，适合信息流与素材库；配合 [data-infinite] 可以做成触底自动加载。

分页状态说明

当前页反色实心，不可再点

可跳转页悬停出现浅色底

省略页总页数超过 7 时折叠中段