Antd + css 实现箭头式进度条

借鉴地址https://blog.youkuaiyun.com/chuangdiuzhuang6335/article/details/101071782

期望的效果

无进展时

有进展时

代码实现如下

1. 用Col实现块状分段

1.1 代码

1.1.1  网页代码

const StageProgress = ({gutter,style,dataSource}) => {
  const cols = [];
  for (let data in dataSource) {
    cols.push(
      <Col  key={data.toString()} span={Math.round(24 / dataSource.length)}>
        <div>
          <b>{dataSource[data]?.title}</b>
          <span>
            {dataSource[data]?.describe}
            {dataSource[data]?.extra}
          </span>
        </div>
      </Col>,
    );
  }

  return (
    <div className="stage-progress" style={style}>
      <Row gutter={gutter}>{cols}</Row>
    </div>
  );
};
export default StageProgress;

1.1.2 样式

.stage-progress {
  .ant-col {
    padding: 0;
    text-align: center;
    background: transparent;
    border: 0;
  }
  .ant-col > div {
    height: 30px;
    color: #000;
    font-size: 14px;
    line-height: 30px;
    background: #f3f3f3;
  }
}

1.1.3 初始数据

初始数据：

dataSource={[
                { title: '开工', describe: '2024/3/18(超时)', extra: '' },
                { title: '首次并网', describe: '(计划：2024/3/21)', extra: '' },
                { title: '全容量并网', describe: '(计划：2024/3/24)', extra: '' },
                { title: '竣工', describe: '(计划：2024/5/28)', extra: '' },
              ]}

 gutter={[8, 8]}

1.2 当前效果

2. 加上左右的箭头

after表示右箭头，before表示左箭头

2.1 css代码

  .ant-col:after {
    //右箭头
    position: absolute;
    top: 0px;
    right: -8px;
    z-index: 3;
    display: block;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 12px solid #f3f3f3;
    content: '';
  }
  .ant-col:last-child:after {
    display: none;
  }

  .ant-col:before {
    //左箭头
    position: absolute;
    top: 0;
    left: 4px;
    display: block;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 12px solid #fff;
    content: '';
  }
  .ant-col:first-child:before {
    display: none;
  }

2.2 当前效果

3. 加上已完成的颜色样式

3.1 网页代码

为col加上active样式名称

 <Col className="ant-col active" key={data.toString()} span={Math.round(24 / dataSource.length)}>

3.2 css代码

  .ant-col.active > div {
    color: #fff;
    background: #1890ff;
  }
  .ant-col.active:after {
    //选中的右箭头
    position: absolute;
    top: 0px;
    right: -8px;
    z-index: 3;
    display: block;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 12px solid #1890ff;
    content: '';
  }

3.3 效果

附完整代码

less

.stage-progress {
  .ant-col {
    padding: 0;
    text-align: center;
    background: transparent;
    border: 0;
  }
  .ant-col > div {
    height: 30px;
    color: #000;
    font-size: 14px;
    line-height: 30px;
    background: #f3f3f3;
  }
  .ant-col.active > div {
    color: #fff;
    background: #1890ff;
  }

  .ant-col:after {
    //右箭头
    position: absolute;
    top: 0px;
    right: -8px;
    z-index: 3;
    display: block;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 12px solid #f3f3f3;
    content: '';
  }

  .ant-col.active:after {
    //选中的右箭头
    position: absolute;
    top: 0px;
    right: -8px;
    z-index: 3;
    display: block;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 12px solid #1890ff;
    content: '';
  }

  .ant-col:last-child:after {
    display: none;
  }

  .ant-col:before {
    //左箭头
    position: absolute;
    top: 0;
    left: 4px;
    display: block;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 12px solid #fff;
    content: '';
  }
  .ant-col:first-child:before {
    display: none;
  }
}

网页

import React, { useEffect, useState } from 'react';
import { Col, Row } from 'antd';
import { Gutter } from 'antd/lib/grid/row';
import './index.less';

const StageProgress = ({
  gutter,
  style,
  dataSource,
}: {
  gutter: number | object | [Gutter, Gutter];
  style: object;
  dataSource: any[]; //需偶数
}) => {
  const cols = [];
  for (let data in dataSource) {
    cols.push(
      <Col className="ant-col active" key={data.toString()} span={Math.round(24 / dataSource.length)}>
        <div>
          <b>{dataSource[data]?.title}</b>
          <span>
            {dataSource[data]?.describe}
            {dataSource[data]?.extra}
          </span>
        </div>
      </Col>,
    );
  }

  return (
    <div className="stage-progress" style={style}>
      <Row gutter={gutter}>{cols}</Row>
    </div>
  );
};
export default StageProgress;

初始数据

import StageProgress from '../BasicData/components/StageProgress';

<StageProgress
              gutter={[8, 8]}
              style={{ marginBottom: 8 }}
              dataSource={[
                { title: '开工', describe: '2024/3/18(超时)', extra: '' },
                { title: '首次并网', describe: '(计划：2024/3/21)', extra: '' },
                { title: '全容量并网', describe: '(计划：2024/3/24)', extra: '' },
                { title: '竣工', describe: '(计划：2024/5/28)', extra: '' },
              ]}
            />