1.Steps步骤条
引导用户按照流程完成任务的导航条。
2.何时使用
当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
组件代码来自： 步骤条 Steps - Ant Design
3.本地验证前的准备
参考文章【react项目+antd组件-demo:hello-world react项目+antd组件-demo:hello-world_react demo-CSDN博客】，将 步骤条 Steps - Ant Design 中需要在本地使用的代码复制覆盖App2.js中的全部代码，启动代码，可在本地查看现象和更改代码。
4.本地验证Steps的用法。
复制下图所示代码，了解Steps步骤条简单的用法。
5.如何改变步骤条的尺寸大小
步骤条的尺寸有两种：普通（default）和迷你（small）
复制一份<Steps … />，并在Steps后添加属性和值size="small"；
同时在两个<Steps … />前后分别添加<>和</>
最终App2.js中的全部代码如下：
import {Steps} from "antd";
const description = 'This is a description.';
const App = () => (
<>
<Steps
current={1}
items={[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
description,
subTitle: 'Left 00:00:08',
},
{
title: 'Waiting',
description,
},
]}
/>
<Steps
size="small"
current={1}
items={[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
description,
subTitle: 'Left 00:00:08',
},
{
title: 'Waiting',
description,
},
]}
/>
</>
);
export default App;
效果图如下：
6.如何改变步骤条的方向
步骤条方向有两种：水平（horizontal）和竖直（vertical）两种方向，默认是水平（horizontal）。
在5中代码的<Steps …>中添加属性和值direction="vertical"
最终App2.js中的全部代码如下：
import {Steps} from "antd";
const description = 'This is a description.';
const App = () => (
<>
<Steps
current={1}
items={[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
description,
subTitle: 'Left 00:00:08',
},
{
title: 'Waiting',
description,
},
]}
/>
<Steps
direction="vertical"
size="small"
current={1}
items={[
{
title: 'Finished',
description,
},
{
title: 'In Progress',
description,
subTitle: 'Left 00:00:08',
},
{
title: 'Waiting',
description,
},
]}
/>
</>
);
export default App;
效果图如下（第2个步骤条方向为竖直）：
本文仅介绍了组件Steps的部分内容，更多内容请参阅官方文档： 步骤条 Steps - Ant Design
