antd百分比步骤条跳转(Steps+Progress+Anchor)
因为antd版本和具体需求问题,antd中带有进度的步骤(4.5.0)不能完全实现。所以自己组合了几个组件,自定义了百分比步骤条。
需求:步骤条图标显示百分比进度,100%会显示☑️。
![image-20201028165750676](https://gitee.com/xuzichang/blogImg/raw/master/image-20201028165750676.png)
1、基本样式
![image-20201028142120690](https://gitee.com/xuzichang/blogImg/raw/master/image-20201028142120690.png)
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;
}
}
}