ReactJS UI Ant 设计步骤组件

Ant Design Library 已经预先构建了这个组件，并且它也很容易集成。 Steps Component 是一种导航栏，有助于引导用户完成任务的步骤。我们可以在 ReactJS 中使用以下方法来使用 Ant Design Steps 组件。

句法：

步骤道具：

className：用于定义该组件的附加类。
current：用于设置当前步长，从 0 开始计数。
方向：用于指定步进条的方向，垂直或水平。
initial：用于设置初始步长，从 0 开始计数。
labelPlacement：用于在垂直或水平方向放置标题和描述。
百分比：用于表示当前步骤在进程状态中的进度循环百分比。
progressDot：用于应用进度点样式的步骤。
responsive：当屏幕宽度小于 532 像素时切换到垂直方向。
size：用于指定步进条的大小。
status：用于指定当前步骤的状态。
type：用于表示步骤的类型。
onChange：是一个回调函数，当步骤改变时触发。

Steps.Step 道具：

description：用于定义步骤的描述。
disabled：用于禁用点击事件。
icon：用于定义步骤的图标。
status：用于指定状态。
subTitle：用于表示步骤的副标题。
title：用于表示步骤的标题。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```
第 3 步：创建 ReactJS 应用程序后，安装必需的模块使用以下命令：
```
npm install antd
```

项目结构：它将如下所示。

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react'
import "antd/dist/antd.css";
import { Steps } from 'antd';
  
const { Step } = Steps;
export default function App() {
  
  return (
    
      ReactJS Ant-Design Steps Component
      
        
        
        
      
    
  );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

参考： https://ant.design/components/steps/