React使用antd的Steps控件的问题

最新推荐文章于 2024-08-05 23:30:12 发布
最新推荐文章于 2024-08-05 23:30:12 发布
阅读量8.3k 收藏 1
点赞数
分类专栏： React 文章标签： React 步骤条 Steps antd
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16256793/article/details/80654372
版权
在使用antd 2.x版本的Steps组件创建竖向点状可点击文字的进度条时遇到问题。虽然在codePen上能成功实现，但在实际项目中样式出现偏差。为解决样式问题，尝试覆盖Steps的样式，目前不确定是版本bug还是其他原因。本文记录这一问题，供后续排查。
摘要由CSDN通过智能技术生成

项目所使用的是antd 2.x版本，由于业务需要，弄一个进度条，使用Steps控件来实现

目标的实现效果：


需要的效果就是，竖着的，点状的步骤，并且文字都是可以点击的

但是在使用Steps控件的过程中，因为需要竖着的，但是在查看antd使用的时候，使用codePen来实现竖着点状步骤是可以的，但是在项目中变成了这样


找了很久，没有找到原因，所有就把Steps的style覆盖掉了

:global {
  .ant-steps-dot.ant-steps-vertical
最低0.47元/天 解锁文章
StudyNetJava
关注
专栏目录
react的Steps antd组件实现页面局部跳转
Eat_sugar的博客
07-15 2177
react的antd中Steps组件实现局部跳转 我在学习react框架的时候，遇到一个问题，需要在react项目中需要使用steps组件来实现的页面局部跳转，达到点击Step1，下面显示Step1的页面内容，点击Step2，显示Step2页面的内容 我百度了很多，都没有找到我需要的代码，大都是通过route来进行跳转的，最后通过研究和咨询大佬，解决了这一问题，希望对大家有帮助，下面直接上代码 ```javascript ```javascript import React from 'react'
【React】Antd - step组件的使用
qq_37086980的博客
06-24 2616
Antd 完成 step 组件 代码案例： index.tsx <div className="steps"> <Steps current={curRecNodeInd} size="small"> {reconcileNodeList.map((item: any, idx: number) => ( <Step key={`${item.index}-${i
Ant Design（antd）基础入门
最新发布
www_tlj的专栏
08-05 1286
Ant Design 是由阿里巴巴旗下蚂蚁金服团队开发的企业级 UI 设计语言和 React 实现的组件库。它致力于提高企业级中后台产品的用户体验，并提供统一、简洁、易用的设计和开发规范。以上是如何在 React 项目中安装和配置 Ant Design 的详细步骤。通过使用创建项目，安装 Ant Design 包，并在项目中引入其样式文件和组件，你可以快速在项目中使用 Ant Design 提供的丰富组件库，提升开发效率和用户体验。
React antd Steps步骤条与Popover气泡卡片结合应用
lxn111111的博客
11-02 1784
由于要求鼠标放到对应部门上时显示具体信息，所以需要两个接口，一个对应步骤条，另一个对应Popover气泡卡片。“开始”、“结束”是采用数组添加方式手动固定在页面上，其余步骤则为动态渲染，所以需要在接口返回值中进行添加。 ...
steps:React步骤
05-04
rc步骤 React步骤组件。 用法 npm install rc-steps < Steps xss=removed> < Steps xss=removed> < Steps xss=removed> < Steps xss=removed> < / Steps > 例子 原料药 名称 类型 默认 描述 类型 细绳 默认 步骤，枚举的重复类型：“默认”或“导航” 方向 细绳 水平的 步骤的方向，枚举：“水平”或“垂直” 当前的 数字 0 当前步骤的索引 最初的 数字 0 索引初始 尺寸 细绳 步长，可能很小 labelPlacement 细绳 步骤标题的位置，可以是“垂直” 地位 细绳 等待 当前步骤的状态，可能是“错误”，“处理”，“完成”，“等待” 图示 {结
求助, antd 的 steps 组件添加 change 事件后仍不能点击
dengfenglai825的博客
08-05 918
如图，想用 steps 组件分步显示不同信息， 官网上说 添加 change 事件后就可以点击 官网 steps 组件链接 但是我添加后仍不能点击切换，有人遇到过这个情况吗？？？
【React】解决antd样式没有显示问题（网页频闪问题）
Sco_jing的博客
11-30 1593
问题详情 最近需要使用Ant Design UI库创建项目，已经创建了五、六次项目了，每次创建项目耗时久、删项目又麻烦不说，展示效果并没有显示antd的样式，整个网页出现不停频闪效果，示例如下： 解决方法 忘记在App.css文件最前方加入一句： @import "~antd/dist/antd.css"; 很难忘的两天，故记录一下，警示下次不会再犯 ...
react+antd搭建后台管理框架
05-20
react+antd搭建前端管理框架（***支持响应式***），主要模块分为：菜单、选项卡、面包屑；通过路由监听，实现三个模块之间的联动（同时监听浏览器）；状态采用react-redux进行集中管理。目前只包含前端代码，未与...
react使用antd表单赋值,用于修改弹框的操作
01-18
补充知识：react中使用antd的表单重置数据 resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]]) 注：initialValue有值时会
React+antd后台管理系统模板
12-01
这个模板主要用于开发者熟悉React和antd组件库的使用，同时也展示了如何在React应用中集成react-router进行页面路由管理。让我们深入了解一下这个项目所涵盖的关键知识点。 1. **React**：React是Facebook开发的...
react-antd-admin:react + ts + antd实现的管理系统模版
03-11
react-antd-admin 基于react + ts + antd建立的管理后台脚手架模版 线上地址 git地址 单独使用 详情请查看 1.配置抽屉 1-1。可缓存系统配置 记录用户使用的系统配置，缓存浏览器中，记录用户习惯。 1-2.antd换肤...
Ant Design分页组件中实现禁止点击当前页按钮的方法
jiaohuizhuang6019的博客
09-23 350
Ant Design分页组件中实现禁止点击当前页按钮的方法
React开发（251）:react项目理解 ant design steps控制进度条
歌谣的博客
10-31 683
Antd Steps步骤条结合路由跳转
annie_7的博客
03-30 2793
Steps步骤条 定义一个home目录， index.js step.js StepOne.js StepTwo.js StepThree.js // index.js import React, { Component } from 'react' import Stepper from './step' import { Route } from 'react-router-dom' impo...
react antd 中table列中内容过长的解决方式
不积跬步，无以至千里；不积小流，无以成江海。
03-10 6798
直接上代码 const jobColumns = [ { title: '单位名称', dataIndex: 'jsdw', key: 'jsdw', // 解决方案一：使用原生的html // render: val => <span title={val}>{val.substring...
Ant Design Pro 引入组件时显示未注册
我笔记
09-10 416
在直接使用Ant-Design-Pro管理框架的时候项目默认按需引入了部分常用的组件，所以有些不常用的组件直接使用是会出现错误的 引入其它没有默认的组件
antd+vue的steps组件在步骤条中添加自定义样式内容（下）
热门推荐
qq_43437571的博客
09-23 1万+
如果antd中steps组件中提供的图标不能满足我们的要求，需要使用自定义的图片来实现，比如实现如下示例： 实现代码如下： <template> <a-row :gutter="24"> <a-col :md="24"> <a-card title="步骤条"> <a-switch checked-children="横向" un-checked-children="纵向"
React使用antd实现分页功能
本资源是关于使用React框架实现分页功能的一个示例代码文档，主要涉及React组件化开发、状态管理、以及Ant Design库的使用。在实现过程中，还引入了Axios库进行数据请求，并对请求进行了封装。 在React应用中实现...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值