【AntDesign】巧妙修改Timeline时间轴
发布时间
阅读量：
阅读量
修改它也是因为公司的需求，需求如下：
第一反应是用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: 'center',alignItems:'center'}} >方案</div>}>
这是第一个节点的内容
</Timeline.Item>
<Timeline.Item style={{ width: '90%', margin: 'auto' }} dot={<div style={{ backgroundColor: '#418df0', color: '#FFFFFF', borderRadius: '50%',width: 30,height: 30,display: 'flex',justifyContent: 'center',alignItems:'center'} } >变更</div>} >
这是第二个节点的内容
</Timeline.Item>
</Timeline>
AI写代码效果如下：
由于节点内容少，所以内容区域没怎么撑开，通过dot，在里面添加div，达到修改节点的效果，通过这个思路，我们可以在节点处增加icon：
<Timeline style={{ marginTop: 10 }}>
<Timeline.Item style={{ width: '90%', margin: 'auto' }} dot={<PlusSquareOutlined />} >
这是第一个节点的内容
</Timeline.Item>
<Timeline.Item style={{ width: '90%', margin: 'auto' }} dot={<ClockCircleOutlined />} >
这是第二个节点的内容
</Timeline.Item>
</Timeline>
AI写代码效果如下：
可以导入头像：
<Timeline style={{ marginTop: 10 }}>
<Timeline.Item style={{ width: '90%', margin: 'auto' }} dot={<img style={{width:30,height:30,borderRadius:'50%'}} src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596129248963&di=410ff47cd154a491ebb2ed2ca40d8adb&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201309%2F26%2F20130926095128_SiPMh.jpeg' />} >
这是第一个节点的内容
</Timeline.Item>
<Timeline.Item style={{ width: '90%', margin: 'auto' }} dot={<img style={{width:30,height:30,borderRadius:'50%'}} src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596129248963&di=390fb20ec3728be6efcde43835a50d22&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201512%2F23%2F20151223175222_5kuj4.jpeg'/>} >
这是第二个节点的内容
</Timeline.Item>
</Timeline>
AI写代码效果如下：
全部评论 (0)
还没有任何评论哟~