AntdPro中ProDescriptions自定义主题的less文件例子 antd progress

antd百分比步骤条（Steps+Progress）、页面内锚点跳转、重写antd组件样式

因为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;
    }
  }
}