【AntDesign】巧妙修改Timeline时间轴

最新推荐文章于 2024-04-10 17:16:53 发布

Halcyon.

最新推荐文章于 2024-04-10 17:16:53 发布

阅读量8.9k

点赞数 6

分类专栏：前端文章标签： ant react

本文链接：https://blog.csdn.net/Hhalcyon/article/details/107701907

版权

本文介绍了如何根据公司需求巧妙地修改AntDesign的时间轴组件Timeline，原本Timeline的节点仅作为步骤展示，但通过调整，实现了在节点中添加内容、图标甚至头像的功能，以满足纵向展示的需求。

摘要由CSDN通过智能技术生成

修改它也是因为公司的需求，需求如下：
在这里插入图片描述
第一反应是用Steps，用了之后发现，Steps只能做导航的作用，最多可以做横向的页面切换的节点，纵向的不行，我尝试过往Step中间添加内容，不会渲染。需求中，两个竖向的节点间是有内容的。于是把目光看向了Timeline。在Ant里，Timeline都是以小点作为步骤节点，实现后如下图：
在这里插入图片描述

现在来改节点：

<Timeline style={
   {
    marginTop: 10 }}>
                  <Timeline.Item style={
   {
    width: '90%', margin: 'auto' }} dot={
   <div  style={
   {
    backgroundColor: '#418df0', color: '#FFFFFF', borderRadius: '50%'  ,width: 30,height: 30,display: 'flex',justifyContent: