# 步骤条 Steps

> 注册、下单这种分几步走完的流程，顶上一排圆点连成线，做完的打勾，当前步高亮。

分类：导航
[全部组件和流程](https://www.dachuiai.com/llms.txt) · [导航选型规则](https://www.dachuiai.com/guides/navigation.md)

## 给 AI：用户把这个组件发给了你

1. 先看用户的项目：框架、页面类型、现在的风格、手机还是电脑为主。
2. 对照下面的「适合 / 不适合」判断合不合适。不合适就直接说，并从[导航选型规则](https://www.dachuiai.com/guides/navigation.md)或[全部组件](https://www.dachuiai.com/llms.txt)里另挑一个。
3. 合适就按「装进项目」装好，示例里的文字和图片换成用户自己的。
4. 告诉用户用了什么、放在哪个文件、以后想改快慢、颜色、大小改哪个参数。

## 什么时候用

- 适合：3 到 6 步、有先后的流程：下单、注册、开通、预约、填长表。
- 不适合：能随便跳着看的内容（用标签页）；只有两步；表示百分比进度（用进度条）。
- 适合的网站：电商、SaaS、后台、本地小店
- 放在：内容区
- 手机上：好用：步骤名要短，4 个字以内。
- 性能代价：低

## 装进项目

- 写法：React 18 以上 + TypeScript + Tailwind CSS v4，一个文件就能用，不引用别的组件。
- 依赖：`npm i lucide-react`
- 文件：原样存成 `steps.tsx`（比如 `src/components/steps.tsx`）。能跑命令就下载[原文](https://www.dachuiai.com/code/steps.tsx)，比手抄准：`curl -fsSL -o src/components/steps.tsx https://www.dachuiai.com/code/steps.tsx`（Windows 写 `curl.exe`）。下载完看一眼第一行是 `import`，不是网页。
- 导出：`Steps` 是可以直接用的部分；最后的 `export default` 是演示示例，只作参考。
- 注意：steps 传每一步的名字，current 是当前第几步，从 0 开始。
- 保留代码里 `prefers-reduced-motion` 的处理：用户开了「减弱动态效果」时内容照样完整显示。
- Next.js（有 app 文件夹）：文件第一行加 `'use client';`。
- 用 JavaScript 不用 TypeScript：Vite 和 Next.js 都能直接用 .tsx 文件；也可以删掉类型标注，改名 .jsx。
- 没有 Tailwind：先装 Tailwind CSS v4（Vite 项目 `npm i tailwindcss @tailwindcss/vite`，vite 配置的 plugins 里加 `tailwindcss()`，入口引入的那个 CSS 文件（一般是 `src/index.css`）第一行写 `@import "tailwindcss";`），或者把类名改写成项目用的样式。
- 已经装了 Tailwind v3：别为了一个组件升级。类名大多通用，少数 v4 写法要换，比如焦点框 `outline-2` 在 v3 里要写成 `outline outline-2`。
- 不是 React（Vue、Svelte、小程序、纯 HTML）：照着代码的做法改写，时长、曲线、参数保持一样。Wix、有赞这类建站平台装不进代码，告诉用户去平台自带的动效设置里找。

## 参数

| 参数 | 默认值 | 作用 |
| --- | --- | --- |
| `steps` |  | 每一步的名字 |
| `current` |  | 当前第几步，从 0 开始 |

## 你可以说

> 下单流程顶部加 Steps 步骤条：购物车、填写地址、付款、完成，做完的打勾，当前步骤高亮。

## 完整代码

```tsx
import {useState} from 'react';
import {Check, CreditCard, MapPin, PartyPopper, ShoppingCart} from 'lucide-react';

/* ---------------------------------------------------------------
 * Steps 步骤条
 * 注册、下单这种要分几步走完的流程，顶上一排圆点连成线，
 * 告诉你一共几步、现在第几步。做完的打勾，没做的是灰的。
 * ------------------------------------------------------------- */
export function Steps({steps, current}: {steps: string[]; current: number}) {
  return (
    <ol className="flex items-start">
      <style>{'.stp-fill{transition:transform .45s cubic-bezier(.22,1,.36,1)}.stp-dot{transition:background-color .25s,color .25s,box-shadow .25s}@media (prefers-reduced-motion:reduce){.stp-fill,.stp-dot{transition:none}}'}</style>
      {steps.map((s, i) => {
        const done = i < current, on = i === current;
        return (
          <li key={s} aria-current={on ? 'step' : undefined} className="relative flex flex-1 flex-col items-center">
            {/* 连接线：后半段用 scaleX 填色 */}
            {i > 0 && (
              <span aria-hidden className="absolute right-1/2 top-[17px] h-0.5 w-[calc(100%-44px)] -translate-x-[22px] overflow-hidden rounded-full bg-zinc-200">
                <span className="stp-fill block h-full origin-left bg-emerald-600" style={{transform: `scaleX(${i <= current ? 1 : 0})`}} />
              </span>
            )}
            <span
              className={`stp-dot relative z-10 grid size-9 place-items-center rounded-full text-sm font-bold ${
                done ? 'bg-emerald-600 text-white' : on ? 'bg-white text-emerald-700 shadow-[0_0_0_2px_#059669,0_0_0_6px_rgba(5,150,105,.15)]' : 'bg-zinc-100 text-zinc-400'
              }`}
            >
              {done ? <Check size={17} strokeWidth={3} /> : i + 1}
            </span>
            <span className={`mt-2.5 text-sm ${on ? 'font-bold text-zinc-900' : done ? 'font-medium text-zinc-700' : 'text-zinc-400'}`}>{s}</span>
            <span className="sr-only">{done ? '（已完成）' : on ? '（当前步骤）' : '（未开始）'}</span>
          </li>
        );
      })}
    </ol>
  );
}

/* ---------------- 示例：下单流程 ---------------- */
const STEPS = ['购物车', '填写地址', '付款', '完成'];
const BODY = [
  {icon: ShoppingCart, title: '确认商品', text: '轻量双人帐篷 × 1，羽绒睡袋 × 1，合计 ¥1,598。'},
  {icon: MapPin, title: '收货地址', text: '小林 · 138 **** 6688 · 杭州市西湖区文三路 88 号'},
  {icon: CreditCard, title: '选择付款方式', text: '微信支付 · 支付宝 · 银行卡'},
  {icon: PartyPopper, title: '下单成功', text: '预计 2 天后送达，可在「我的订单」查看物流。'},
];

export default function StepsDemo() {
  const [cur, setCur] = useState(1);
  const b = BODY[cur];
  return (
    <div className="flex h-full flex-col bg-zinc-50 p-8">
      <div className="rounded-3xl border border-zinc-200/80 bg-white px-6 pb-6 pt-7">
        <Steps steps={STEPS} current={cur} />
      </div>
      <div key={cur} className="mt-5 flex items-start gap-4 rounded-3xl border border-zinc-200/80 bg-white p-7 stp-body">
        <style>{'.stp-body{animation:stp-body .3s cubic-bezier(.22,1,.36,1)}@keyframes stp-body{from{opacity:0;transform:translateY(6px)}}@media (prefers-reduced-motion:reduce){.stp-body{animation:none}}'}</style>
        <span className="grid size-12 place-items-center rounded-2xl bg-emerald-50 text-emerald-700"><b.icon size={22} /></span>
        <div>
          <h2 className="text-lg font-black text-zinc-900">{b.title}</h2>
          <p className="mt-1.5 text-sm text-zinc-600">{b.text}</p>
        </div>
      </div>
      <div className="mt-5 flex justify-between">
        <button onClick={() => setCur(Math.max(0, cur - 1))} disabled={cur === 0} className="h-11 rounded-full border border-zinc-200 bg-white px-6 text-sm font-bold text-zinc-700 transition hover:bg-zinc-50 disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-emerald-600">上一步</button>
        <button onClick={() => setCur(cur === 3 ? 0 : cur + 1)} className="h-11 rounded-full bg-emerald-600 px-7 text-sm font-bold text-white transition hover:bg-emerald-700 active:scale-[.98] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600">
          {cur === 2 ? '确认付款' : cur === 3 ? '再逛逛' : '下一步'}
        </button>
      </div>
    </div>
  );
}
```