css - 如何实现一个简单的反应多步控制
问题描述
我是 CSS 的新手,并试图基于一些现有代码实现多步 React 控件(目前这些步骤是静态的,一旦我发现了我的问题,我就会让事情变得动态):
import styles from "./ProgressSteps.module.css";
const ACProgressSteps = () =>{
return(
<div className={styles.container}>
<ul className={`${styles.progressbar} ${styles.nobullets}`}>
<li className={styles.selected}>Aircraft Type</li>
<li>Weight Index</li>
<li>Airport Times</li>
<li>Documents</li>
<li>Tada</li>
</ul>
</div>
)}
活动步骤由 标识{styles.selected}
(并且应用此样式的所有先前步骤也应标记为绿色)。下面给出了相应的样式(我将它们导入到我的控件中):
.container{
width: 100%;
position: absolute;
z-index: 1;
}
.progressbar{
counter-reset: step;
}
ul.nobullets {
list-style-type: none; /* Remove bullets */
padding: 0; /* Remove padding */
margin: 0; /* Remove margins */
}
.progressbar li{
float: left;
width: 20%;
position: relative;
text-align: center;
}
.progressbar li:before{
counter-increment: step;
content:counter(step);
width: 30px;
height: 30px;
border: 2px solid #bebebe;
display: block;
margin: 0 auto 10px auto;
border-radius: 50%;
line-height: 27px;
background: white;
color: #bebebe;
text-align: center;
font-weight: bold;
}
.progressbar li:after{
content: '';
position: absolute;
width:100%;
height: 3px;
background: #979797;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after{
content: none;
}
.progressbar li.selected + li:after{
background: #3aac5d;
}
.progressbar li.selected + li:before{
border-color: #3aac5d;
background: #3aac5d;
color: white
}
但是,在前面的示例中,不是选择了第一个“步骤”,而是选择了第二个步骤,如下图所示(似乎我遇到了某种“一个问题”):
任何有关解决此问题的帮助将不胜感激!
编辑:作为对原作者的礼貌,我改编的例子可以在这里找到:https ://steemit.com/utopian-io/@alfarisi94/how-to-make-step-progress-bar-only-using -css
解决方案
符号选择器+
选择紧跟在指定元素之后的元素,因此li.selected + li:before
定位<li>Weight Index</li>
为紧跟在li
类名. 之后的元素.selected
。
以下将修复它:
.progressbar li.selected:after {
background: #3aac5d;
}
.progressbar li.selected:before {
border-color: #3aac5d;
background: #3aac5d;
color: white;
}
const ACProgressSteps = () => {
return (
<div className='container'>
<ul className='progressbar nobullets'>
<li className='selected'>Aircraft Type</li>
<li>Weight Index</li>
<li>Airport Times</li>
<li>Documents</li>
<li>Tada</li>
</ul>
</div>
);
};
ReactDOM.render(<ACProgressSteps />, document.getElementById('root'));
.container {
width: 100%;
position: absolute;
z-index: 1;
}
.progressbar {
counter-reset: step;
}
ul.nobullets {
list-style-type: none; /* Remove bullets */
padding: 0; /* Remove padding */
margin: 0; /* Remove margins */
}
.progressbar li {
float: left;
width: 20%;
position: relative;
text-align: center;
}
.progressbar li:before {
counter-increment: step;
content: counter(step);
width: 30px;
height: 30px;
border: 2px solid #bebebe;
display: block;
margin: 0 auto 10px auto;
border-radius: 50%;
line-height: 27px;
background: white;
color: #bebebe;
text-align: center;
font-weight: bold;
}
.progressbar li:after {
content: "";
position: absolute;
width: 100%;
height: 3px;
background: #979797;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.selected:after {
background: #3aac5d;
}
.progressbar li.selected:before {
border-color: #3aac5d;
background: #3aac5d;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
推荐阅读
- php - PHP ImagickDraw 线程化
- java - 如何将值从一个网站转移到另一个网站(Spring Boot - Angular)?
- java - 使用 ResultSet.getString() 或 ResultSet.getTimestamp() 获取时间戳更好吗?
- mysql - 如何将一个容器中的 mysql 数据库绑定到另一个运行我的 django 博客应用程序的容器(使用 docker-compose)
- sql-server - 如何将此格式化的 txt 文件导入 SQL Server 表
- sql - SQL 代码中带有外键的 SQL 名称错误
- r - Shiny 中 DT::RenderDataTable 中的颜色代码单元格
- python - 如何使用 Pandas 改进具有可迭代最大值的新列的巨大代码?
- python - 当我调用函数 def 时出现错误,因为_you_watched 错误是 sample() 缺少 1 个必需的位置参数:'k'
- c# - 将 Action<> 传递给异步方法