Steps步骤条(antd-design组件库)简单用法

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/202315.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

用bat制作图片马——一句话木马

效果图 代码 ECHO OFF TITLE PtoR MODE con COLS55 LINES25 color 0A:main cls echo.当前时间&#xff1a;%date% %time% echo.欢迎使用图片马制作工具 echo.请确保图片和php在同一路径下 echo.echo 请将图像文件拖放到此窗口并按 Enter&#xff1a; set /p "imagefile&q…

项目demo —— GPT 聊天机器人

本文介绍我的开源项目 TelegramChatBot&#xff0c;这是一个基于 OpenAI GPT API 开发的 telegram 机器人&#xff0c;具有多模态交互能力&#xff0c;求 star&#xff01;感谢大家&#xff01;在 telegram jokerController_bot 立即体验&#xff01;欢迎对 GPT 应用开发或对 t…

SQL server-excel数据追加到表

参考文章&#xff1a;SQL server 2019 从Excel导入数据_mssql2019 导入excel数据-CSDN博客 将excel数据导入到SQL server数据库的详细过程 注意&#xff1a;第一行数据默认为数据库表中的字段&#xff0c;所以这个必须要有&#xff0c;否则无法映射导入 问题1&#xff1a;ADD…

如何使用阿里云虚拟主机和域名设置网站?

本文档将向您展示如何使用阿里云虚拟主机来设置一个新网站&#xff0c;并完成一个域名。如果您按照此处的步骤操作&#xff0c;您将启动并运行一个新网站&#xff0c;可以使用您选择的名称在全球范围内访问&#xff0c;并托管在阿里云平台上。 本文档假设您已经拥有有效的阿里…

Python爬虫遇到重定向URL问题时如何解决?

什么是重定向 重定向是指当用户请求一个URL时&#xff0c;服务器返回一个中断请求的URL的响应。这种情况通常发生在网站对URL进行了修改或者重定向到其他页面的情况下。其中&#xff0c;如果处理不当开发&#xff0c;可能会导致爬虫无法获取所需的数据&#xff0c;从而影响爬虫…

基于SSM的仓库管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

CentOS7安装RabbitMQ

服务器系统版本&#xff1a;CentOS7 安装RabbitMq版本&#xff1a;3.7.18 将此安装包目录下的两个文件上传到服务/usr/local/rabbitmq中备用。 安装Erlang依赖包 rpm -ivh erlang-22.0.7-1.el7.x86_64.rpm安装RabbitMQ安装包(需要联网) yum install -y rabbitmq-server-3.7.1…

Message全局提示(antd-design组件库)简单用法

1.Message全局提示 全局展示操作反馈信息。 2.何时使用 可提供成功、警告和错误等反馈信息。 顶部居中显示并自动消失&#xff0c;是一种不打断用户操作的轻量级提示方式。 组件代码来自&#xff1a; 全局提示 Message - Ant Design 3.本地验证前的准备 参考文章【react项目ant…

【LeetCode】101. 对称二叉树

101. 对称二叉树 难度&#xff1a;简单 题目 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&#…

Java高级技术(注解)

一&#xff0c;注解 二&#xff0c;案例 三&#xff0c;注解原理 四&#xff0c;元注解 五&#xff0c;案例 六&#xff0c;解析注解 七&#xff0c;案例

本地部署GPT的实战方案

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

C++面向对象复习笔记暨备忘录

C指针 指针作为形参 交换两个实际参数的值 #include <iostream> #include<cassert> using namespace std;int swap(int *x, int* y) {int a;a *x;*x *y;*y a;return 0; } int main() {int a 1;int b 2;swap(&a, &b);cout << a << &quo…

多模块项目打包部署

目录结构 这些模块间相互依赖&#xff0c;打包的时候打父模块&#xff0c;就是带root的这个 先clean&#xff0c;再package&#xff0c;就跟一般的项目一样了。 有可能遇到报错Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.22.2:test&#xff…

springboot基础配置及maven运行

目录 1、spring快速开始&#xff1a; 2、通过idea工具打开导入包 3、maven打包 1、springboot快速开始&#xff1a; 环境依赖&#xff1a;jdk17 Spring | Quickstart spring初始化包下载&#xff1a; 点击generate&#xff0c;下载包 2、通过idea工具打开导入包 我之前写了…

【云备份】热点管理模块

文章目录 整体思路概括热点管理实现构造函数Hotjudge ——热点判断RunModule ——运行模块 代码实现hot.hpp 整体思路概括 整体概括&#xff1a; 对服务器上备份的文件进行检测&#xff0c;那些文件长时间没有被访问&#xff0c;则认为是非热点文件 进行压缩存储&#xff0c;节…

华清远见嵌入式学习——C++——作业2

作业要求&#xff1a; 代码&#xff1a; #include <iostream>using namespace std;class Rect { private:int width;int height;public:void init(int w,int h);void set_w(int w);void set_h(int h);void show(); };void Rect::init(int w,int h) {width w;height h;…

BUUCTF sqltest 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 网站遭受到攻击了&#xff0c;还好我们获取到了全部网络流量。 链接: https://pan.baidu.com/s/1AdQXVGKb6rkzqMLkSnGGBQ 提取码: 34uu 注意&#xff1a;得到的 flag 请包上 flag{} 提交 密文&#xff1a; 下载附件…

GDPU 数据结构 天码行空12

文章目录 数据结构实验十二 图的遍历及应用一、【实验目的】二、【实验内容】三、实验源代码&#x1f37b; CPP&#x1f37b; C 数据结构实验十二 图的遍历及应用 一、【实验目的】 1、 理解图的存储结构与基本操作&#xff1b; 2、熟悉图的深度度优先遍历和广度优先遍历算法…

RabbitMQ的Web管理页面

访问页面 http://IP:15672/账号密码默认都是&#xff1a;guest 主页概览 Overview 显示当前RabbitMQ Broker的运行信息、连接信息、集群信息以及配置信息等。 连接 Connections 无论生产者还是消费者&#xff0c;都需要与RabbitMQ建立连接后才可以完成消息的生产和消费&#…

PHP:js中怎么使用PHP变量,php变量为数组时的处理

方法一&#xff1a;使用内嵌 PHP 脚本标记 1、简单的拼接 使用内嵌的 PHP 脚本标记 <?php ?> 将 PHP 变量 $phpVariable 的值嵌入到 JavaScript 代码中。 <?php $phpVariable "Hello, World!"; ?><script> // 将 PHP 变量的值传递给 JavaS…