All files / src/stepper/_example StepperProcessVerticalExample.jsx

75% Statements 3/4
50% Branches 1/2
50% Functions 1/2
75% Lines 3/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42          1x                                     1x   1x                              
import React, { Fragment, useState } from "react";
import { Stepper } from "@tencent/tea-component/lib/stepper";
import { Switch } from "@tencent/tea-component/lib/switch";
 
export default function StepperExample() {
  const steps = [
    { id: "prepare", label: "备案类型" },
    { id: "info", label: "备案信息" },
    {
      id: "upload",
      label: "上传资料",
      detail: (
        <Fragment>
          <strong>资料审核中</strong>
          <br />
          腾讯云会在 <strong>1 个工作日内</strong>审核完成,请耐心等候。
          <a>催单处理</a>
        </Fragment>
      ),
    },
    { id: "photo", label: "办理拍照" },
    { id: "finish", label: "完成备案" },
  ];
 
  const [dot, setDot] = useState(false);
 
  return (
    <Fragment>
      <Stepper
        type={dot ? "process-vertical-dot" : "process-vertical"}
        current="upload"
        steps={steps}
      />
      <section>
        <Switch value={dot} onChange={value => setDot(value)}>
          使用圆点样式
        </Switch>
      </section>
    </Fragment>
  );
}