react + less制作一个箭头步骤条

效果

image.png

index.tsx

import styles from "./index.module.less";
interface Props {
  stepList: string[],
  activeIndex: number
}
export default function Index(props: Props) {
  const {
    stepList = ['基本信息', '数据来源配置', '数据结构配置', '关联元数据配置'],
    activeIndex = 1
  } = props

  return <div className={styles.stepBox}>
    {stepList.map((item, index) => <div className={styles.stepBar} key={index} data-active={activeIndex >= index ? true : false}>
      {item}
    </div>)}
  </div>
}

less

.stepBox {
  display: flex;
}

.stepBar {
  position: relative;
  width: 160px;
  height: 40px;
  line-height: 40px;
  background: #F7F8FA;
  margin: 0px 2px;
  color: #575C66;
  font-size: 14px;
  text-align: center;

  &:first-child::after {
    display: none;
  }

  &:last-child::before {
    display: none;
  }

  &[data-active='true'] {
    background: #9434DF;
    color: #fff;
    font-weight: 500;

    &::before {
      border-color: transparent transparent transparent #9434DF;
    }
  }
}

.stepBar::before {
  content: " ";
  width: 0;
  height: 0;
  border: solid;
  border-color: transparent transparent transparent #F7F8FA;
  border-top-width: 20px;
  border-right-width: 20px;
  border-bottom-width: 20px;
  border-left-width: 14px;
  position: absolute;
  right: -33px;
  top: 0px;
  z-index: 1;
}

.stepBar::after {
  content: " ";
  width: 0;
  height: 0;
  border: solid;
  border-color: transparent transparent transparent #fff;
  border-top-width: 20px;
  border-right-width: 20px;
  border-bottom-width: 20px;
  border-left-width: 14px;
  position: absolute;
  left: 0px;
  top: 0px;
}