【Ant-Desgin-React 步骤条】步骤条配合组件使用

步骤条配合组件使用

  • 基础使用
  • 多分组进度

基础使用

/* eslint-disable no-unused-vars */
import React, { useState } from 'react'
import { Button, message, Steps, theme } from 'antd'
import After from './components/after'
import Now from './components/now'
const steps = [{title: 'Now',content: <Now />},{title: 'After',content: <After />}
]const StepsDemo = () => {const { token } = theme.useToken()// 步骤条当前步骤const [current, setCurrent] = useState(0)// 下一步const next = () => {setCurrent(current + 1)}// 上一步const prev = () => {setCurrent(current - 1)}// 步骤条配置const items = steps.map(item => ({key: item.title,title: item.title}))const contentStyle = {lineHeight: '260px',textAlign: 'center',color: token.colorTextTertiary,backgroundColor: token.colorFillAlter,borderRadius: token.borderRadiusLG,border: `1px dashed ${token.colorBorder}`,marginTop: 16}return (<>{/* 步骤条组件 */}<Steps current={current} items={items} />{/* 步骤条内容 */}<div style={contentStyle}>{steps[current].content}</div>{/* 按钮组 */}<divstyle={{marginTop: 24}}>{current < steps.length - 1 && (<Button type="primary" onClick={() => next()}>Next</Button>)}{current === steps.length - 1 && (<Button type="primary" onClick={() => message.success('Processing complete!')}>Done</Button>)}{current > 0 && (<Buttonstyle={{margin: '0 8px'}}onClick={() => prev()}>Previous</Button>)}</div></>)
}
export default StepsDemo

在这里插入图片描述

多分组进度

/* eslint-disable no-unused-vars */
import React from 'react';
import { Avatar, List, Steps } from 'antd';const data = [{title: '小王',current: 0,steps: [{title: '小王步骤1',description: '这是小王步骤1',},{title: '小王步骤2',description: '这是小王步骤2',},{title: '小王步骤3',description: '这是小王步骤3',},]},{title: '小李',current: 1,status: 'error',steps: [{title: '小李步骤1',description: '这是小李步骤1',},{title: '小李步骤2',description: '这是小李步骤2',},{title: '小李步骤3',description: '这是小李步骤3',},]},{title: '小宋',current: 2,steps: [{title: '小宋步骤1',description: '这是步骤1',},{title: '小宋步骤2',description: '这是小宋步骤2',},{title: '小宋步骤3',description: '这是小宋步骤3',},]},{title: '小刘',current: 1,steps: [{title: '小刘步骤1',description: '这是小刘步骤1',},{title: '小刘步骤2',description: '这是小刘步骤2',},{title: '小刘步骤3',description: '这是小刘步骤3',},]},
];const App = () => (<div><ListitemLayout="horizontal"dataSource={data}renderItem={(item, index) => (<List.Item><List.Item.Metaavatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}title={<a href="https://ant.design">{item.title}</a>}description={`这是${item.title}的进度情况`}/><Stepsstyle={{marginTop: 8,}}type="inline"current={item.current}status={item.status}items={item.steps}/></List.Item>)}/></div>
);
export default App;

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker 安装 Mongo

创建宿主机目录 在你的宿主机上创建必要的目录来存储 MongoDB 的数据和配置文件。这样做可以保证即使容器被删除&#xff0c;数据也能得到保留。 mkdir -p /develop/mongo/data mkdir -p /develop/mongo/config创建 MongoDB 配置文件 创建一个名为 mongod.conf 的 MongoDB 配…

RestfulApi RestTemplate代码规范介绍

1.介绍 1.1 RestfulApi Restful API 是一种设计风格&#xff0c;代表了使用 HTTP 协议构建 web 服务的一种架构原则。REST&#xff08;Representational State Transfer&#xff09;的核心思想是&#xff0c;通过 URL 定位资源&#xff0c;使用 HTTP 方法&#xff08;GET, POS…

C++中容易遗忘的知识点一

文章目录 前言一、数据类型二、运算符按位运算符 三、分支和循环四、数组五、字符串六、结构体七、指针const和指针&#xff1a;看const在 * 哪一边 总结 前言 C语法基础&#xff0c;涉及牛客网上刷题 一、数据类型 1.一个字节8位 2.int是2个字节&#xff0c;float是4个字节…

MySQL多版本并发控制mvcc原理浅析

文章目录 1.mvcc简介1.1mvcc定义1.2mvcc解决的问题1.3当前读与快照读 2.mvcc原理2.1隐藏字段2.2版本链2.3ReadView2.4读视图生成原则 3.rc和rr隔离级别下mvcc的不同 1.mvcc简介 1.1mvcc定义 mvcc(Multi Version Concurrency Control)&#xff0c;多版本并发控制&#xff0c;是…

golang学习笔记(defer基础知识)

什么是defer defer语句用于golang程序中延迟函数的调用&#xff0c; 每次defer都会把一个函数压入栈中&#xff0c; 函数返回前再把延迟的函数取出并执行。 为了方便描述&#xff0c; 我们把创建defer的函数称为主函数&#xff0c; defer语句后面的函数称为延迟函数。延迟函数…

npm常用的命令大全(2024-04-21)

nodejs中npm常见的命令 npm主要是node包管理和发布的工具。 npm官网网址&#xff1a;npm | Homehttps://www.npmjs.com/官网英文文档&#xff1a; npm DocsDocumentation for the npm registry, website, and command-line interfacehttps://docs.npmjs.com/about-npm官网中文文…

同城便民信息小程序源码系统:相亲交友+拼车顺风车功能 带完整的安装代码包以及搭建教程

在信息化、数字化的时代&#xff0c;人们的生活越来越离不开各种智能应用。其中&#xff0c;小程序作为一种轻量级、便捷的应用形式&#xff0c;正逐渐渗透到我们日常生活的方方面面。今天&#xff0c;我们要介绍的这款“智慧同城便民信息小程序源码系统”&#xff0c;不仅集成…

SQL仓库

1. 查表中数据个数 select count(*) from table_name where condition 2. 删除表中数据 delete from table_name where condition 3.筛选符合条件数据并且将结果根据条件公式求和 SELECTsum(case when transaction_state B then transaction_amountwhen transaction_stat…

.cn是几级域名?

.cn是中国的国家顶级域名&#xff08;ccTLD&#xff09;&#xff0c;在互联网域名系统中起着重要的作用。在本文中&#xff0c;我们将重点探讨.cn域名的层次结构和级别&#xff0c;并解释每个级别的含义和应用。 一、域名的层次结构 域名采用了一种典型的层次结构&#xff0c…

基于享元模式实现连接池

享元模式 结构 享元&#xff08;Flyweight &#xff09;模式中存在以下两种状态&#xff1a; 1. 内部状态&#xff0c;即不会随着环境的改变而改变的可共享部分。 2. 外部状态&#xff0c;指随环境改变而改变的不可以共享的部分。享元模式的实现要领就是区分应用中的这两 种…

jitpack发布,记录一个异常

异常日志(全文)&#xff1a; Init SDKMan Found Android manifest Android SDK version: . Build tools: Found gradle Gradle build script WARNING: gradle/wrapper/gradle-wrapper.jar does not exist! Needs to be committed.ERROR: Gradle wrapper not found. Please ad…

每日一题:跳跃游戏II

给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。换句话说&#xff0c;如果你在 nums[i] 处&#xff0c;你可以跳转到任意 nums[i j] 处: 0 < j < nums[i] i j < n 返回到达 nums[n - 1] 的最…

CAS机制(Compare And Swap)源码解读与三大问题

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java源码解读-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 1. 前言 2. 原子性问题 3. 乐观锁与悲观锁 4. CAS操作 5. CAS算法带来的…

西米支付:支付行业中,“清算、结算、清结算”之间的区别

做支付最头疼的三个词莫过于“清算、结算、清结算”&#xff0c; 傻傻分不清&#xff0c;偶尔清晰偶尔混沌&#xff0c;有时候吧觉得自己很清晰了&#xff0c;突然跟别人聊天或者看书、看文章时又觉得糊涂起来了&#xff0c;在一些场景里好像很清晰&#xff0c;但是到了另一些…

构建二叉树搜索树算法题总结(第三十天)

701. 二叉搜索树中的插入操作 题目 给定二叉搜索树&#xff08;BST&#xff09;的根节点 root 和要插入树中的值 value &#xff0c;将值插入二叉搜索树。 返回插入后二叉搜索树的根节点。 输入数据 保证 &#xff0c;新值和原始二叉搜索树中的任意节点值都不同。 答案 cla…

几种免费SSL证书申请方式

目录 DV单域名免费证书的获取渠道&#xff1a; DV多域名免费证书获取渠道&#xff1a; DV通配符免费证书获取渠道&#xff1a; 随着现在网络安全意识的逐渐提升&#xff0c;越来越多的网站都在相继配对部署SSL证书&#xff0c;用以实现https访问。 大家都知道SSL证书好&…

数据分析学习资源(未完)

1、PDF 数据分析自学攻略 增长黑客&#xff08;AARRR&#xff09; 量化思维

异步并发怎么做?

异步并发 1、flask的异步并发问题解决办法实现方案&#xff08;1&#xff09;flask 异步视图装饰器&#xff08;2&#xff09;WSGI启动服务 2、fastapi异步编程 1、flask的异步并发 问题 flask在开发环境下是单线程的&#xff0c;如果某个请求长时间无响应&#xff08;阻塞&…

面试——数据库中的锁升级(Lock Escalation)机制

假设执行下面的sql语句 update tb_user set age age 1;以MySQL为例&#xff0c;按照两阶段锁协议&#xff0c;会先给tb_user加上表意向锁&#xff0c;然后对tb_user的所有行加上行锁&#xff0c;但是当tb_user数据量非常多的时候&#xff0c;频繁的获取行锁会影响性能&#…