antd百分比步驟條跳轉（Steps+Progress+Anchor）

因為antd版本和具體需求問題，antd中帶有進度的步驟（4.5.0）不能完全實現。所以自己組合了幾個組件，自定義了百分比步驟條。

需求：步驟條圖標顯示百分比進度，100%會顯示☑️。

1、基本樣式

2、使用到的組件

Step

參數	說明	類型	默認值	版本
className	步驟條類名	string	-
labelPlacement	指定標簽放置位置，默認水平放圖標右側，可選 vertical 放圖標下方	string	horizontal

Steps.Step

參數	說明	類型	默認值	版本
subTitle	子標題	ReactNode	-
icon	步驟圖標的類型，可選	ReactNode	-

Progress

屬性	說明	類型	默認值
type	類型，可選 line circle dashboard	string	line
strokeColor	圓形進度條線的色彩，傳入 object 時為漸變	string | object	-
strokeWidth	圓形進度條線的寬度，單位是進度條畫布寬度的百分比	number	6
width	圓形進度條畫布寬度，單位 px	number	132
percent	百分比	number	0
format	內容的模板函數	function(percent, successPercent)	(percent) => percent + %

3、組件代碼

import { Steps, Progress} from 'antd'
import styles from './index.less'
import { CheckOutlined } from '@ant-design/icons'
const { Step } = Steps;

<Steps labelPlacement="vertical" className={styles.stepsClass}>
    <Step
        subTitle="step1"
        icon={
            <Progress
                type="circle"
                strokeWidth={15}
                strokeColor='#87d068'
                percent={8}
                width={50}
                format={(percent) => percent === 100 ? <CheckOutlined /> : `${percent}`}
            />
        }
    />
</Steps>

// [index.less]
.stepsClass {
  :global {
    .ant-steps-item-tail {
      margin-top: 16px;
      width: 95%;
      margin-left: 63px;
    }

    .ant-steps-item-icon {
      margin-left: 30px;
    }
  }
}

4、總結

在antd中重寫組件樣式

🔑：在less文件中重寫同名類名，在重寫的類名外添加:global包裹。使當前樣式只作用於當前組件，再在用一層class包裹。（參考：Ant Design 中覆蓋組件樣式）

進階版

需求：點擊步驟條，跳轉至頁面上滾動加載容器內對應的表格

1、使用到的組件

Anchor

成員	說明	類型	默認值	版本
affix	固定模式	boolean	true
getContainer	指定滾動的容器	() => HTMLElement	() => window

Anchor.Link

成員	說明	類型	默認值	版本
href	錨點鏈接	string	-
title	文字內容	ReactNode	-

Row、Table、 Typography.Title

import InfiniteScroll from "react-infinite-scroller"

InfiniteScroll

Name	Required	Type	Default	Description
initialLoad		Boolean	true	Whether the component should load the first set of items.
pageStart		Number	0	The number of the first page to load, With the default of 0, the first page is 1.
useWindow		Boolean	true	Add scroll listeners to the window, or else, the component's parentNode.

2、組件代碼

在原來的基礎上，添加了 Anchor。在每一步Step中的Progress外包裹了Link。

Link的href指向表格標題所在的Title內的Id。（直接使用表格的title做標題不好看）

頁面上有兩個滾動條，使用錨點時默認滾動的容器是window，會導致兩個滾動條一起變化。

🔧：​可以通過Anchor的getContainer屬性指定滾動的容器。（參考：AntDesign使用遇到問題整理）

錨點href如何指向表格？

🔧：href指向對應的Id

<>
    <Anchor
        className={styles.anchorClass}
        affix={false}
        getContainer={() => document.getElementById('scrollContent')}
    >
        <Steps labelPlacement="vertical" className={styles.stepsClass}>
            <Step
                subTitle="step1"
                icon={
                    <Link href="#tabelTitle"
                        title={
                            <Progress
                                type="circle"
                                strokeWidth={15}
                                strokeColor='#87d068'
                                percent={8}
                                width={50}
                                format={(percent) => percent === 100 ? <CheckOutlined /> : `${percent}`}
                            />
                        }
                    />
                }
            />
        </Steps>
    </Anchor>
    <div className={styles.demoInfiniteContainer}>
        <InfiniteScroll initialLoad={false} pageStart={0} useWindow={false} id="scrollContent">
            <Row><Title level={4} id="tabelTitle">表格標題</Title></Row>
            <Row><Table/> </Row>
        </InfiniteScroll>
    </div>
</>

// [index.less]
.demoInfiniteContainer {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: auto;
  padding: 8px 24px;
  height: 300px;
  margin-top: 12px;
}
.anchorClass {
  :global {
    .ant-anchor-ink {
      display: none;
    }
  }
}