react 、antd的steps的Progress跟Finished状态自定义图片

啊黑啊

码龄10年

关注

原创最新推荐文章于 2024-09-05 11:56:53 发布 1.3k 阅读

自定义antd progress进度条组件样式【代码】自定义antd progress进度条组件样式。阅读详情

先看效果，点击Next按钮，编辑状态的图标变成完成状态的图标。

页面代码

<Row align="center" justify="center" className="about-row">
  <Col span={22} style={{ textAlign: "center" }}>
    <Steps current={current} labelPlacement="vertical" className="verify-steps-box ant-steps-horizontal">
      {StepItem}
    </Steps>
  </Col>
 <Col span={24}>  
     {/*content*/}
{
  current === 0 && (
    <div>你的内容1</div>
  )
}
{
  current === 1 && (
    <div>你的内容2</div>
  )
}
{
  current === 2 && (
    <div>你的内容3</div>
  )
}
{
  current === 3 && (
    <div>你的内容4</div>
  )
}
{
  current === 4 && (
    <div>你的内容5已完成</div>
  )
}

</Col>
  <Col span={24}>
      {/*操作按钮*/}
<div className="steps-action">

  {current > 0 && (
    <Button
      style={{
        width: "185px"
      }}
      variant="blackBorder"
      onClick={() => prev()}
    >
      Back
    </Button>
  )}
  {current < steps.length - 1 && (
    <Button
      style={{
        width: "185px"
      }}
      variant="linearBorder"
      onClick={() => next()}
    >
      Next
    </Button>
  )}
  {current === steps.length - 1 && (
      <Button
        style={{
          width: "185px"
        }}
        variant="linear"
        onClick={() => message.success("Processing complete!")}
      >
        Submit
      </Button>
  )}
</div>

  </Col>

<Row/>

2.方法和定义

const [current, setCurrent] = useState(0);

const next = () => {
  setCurrent(current + 1);
  console.log(current);
};

const prev = () => {
  setCurrent(current - 1);
};

const StepItem = stepsTest.map((item, index) => {
  if (current === index) {
    item.icon = <Image src="/images/edittt.png" preview={false} width={28} height={28}></Image>;
  } else if (current > index - 1) {
    item.icon = <Image src="/images/finishhhh.png" preview={false} width={28} height={28}></Image>;
  } else {
    item.icon = null;
  }
  return <Step key={item.title} title={item.title} icon={item.icon} />;
});

3.引入和数据

import * as React from "react";
import { PageMainBox } from "../../components/PageMainBox";
import { Col, Image, Row, Steps, message, Space, Button } from "antd";
import { useState } from "react";


const { Step } = Steps;


const stepsTest = [
  {
    key: 0,
    title: "aaaaa",
  },
  {
    key: 1,
    title: "bbbb",
  },
  {
    key: 2,
    title: "ccccccccc",
  },
  {
    key: 3,
    title: "ddddddd",
  },
  {
    key: 4,
    title: "eeeeeee",
  }
];

4.部分css

 .steps-scroll-content {
          height: 500px;
          overflow-y: scroll;
          overflow-x: hidden;
          margin: 12px auto;
        }

        .verify-steps-box {
          max-width: 580px;
          display: inline-flex;
          justify-content: center;
        }

        .verify-steps-box .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-tail::after,
        .verify-steps-box .ant-steps-item-tail::after {
          background-color: #c9ced9 !important;
          height: 2px;
        }

        .verify-steps-box .ant-steps-label-vertical .ant-steps-item-tail {
          padding: 1.5px 24px;
        }

        .verify-steps-box .ant-steps-item-icon {
          width: 28px;
          height: 28px;
          line-height: 26px;
          border: 2px solid rgba(0, 0, 0, 0.25);
          font-family: 'Roboto';
          font-size: 14px;
          font-weight: 600;
        }

        .verify-steps-box .ant-steps-item-custom > .ant-steps-item-container > .ant-steps-item-icon > .ant-steps-icon {
          width: 28px;
          height: 28px;
          display: block;
        }

        .verify-steps-box .ant-steps-item-title {
          font-family: 'Roboto';
          font-size: 12px;
          font-weight: normal;
          text-align: center;
          color: #c9ced9;
          width: 70px;
          line-height: 1.2;
        }

        .verify-steps-box:not(.ant-steps-label-vertical) .ant-steps-item {
          padding-left: 0;
        }

        .steps-content {
          max-width: 400px;
          margin: 0 auto;
        }

        .steps-action {
          margin-bottom: 44px;
          text-align: center;
        }