Stepper Angular 5 | 6 HTML CSS Onclick事件
我需要有关单击事件的帮助,以了解我的步进程序进度 例如,我正在执行步骤1,当我单击3时,我将转到步骤3 我尝试单击Stepper Angular 5 | 6 HTML CSS Onclick事件,html,css,angular,progress,stepper,Html,Css,Angular,Progress,Stepper,我需要有关单击事件的帮助,以了解我的步进程序进度 例如,我正在执行步骤1,当我单击3时,我将转到步骤3 我尝试单击,但没有成功 这是我的html和CSS <div class="row"> <div class="col-xs-12 col-md-8 offset-md-2 block border"> <div class="wrapper-progressBar"> <ul class="progressBar">
,但没有成功
这是我的html和CSS
<div class="row">
<div class="col-xs-12 col-md-8 offset-md-2 block border">
<div class="wrapper-progressBar">
<ul class="progressBar">
<li class="active"></li>
<li class=""></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
“我期待这个”
我想您正在寻找(单击)事件绑定 大概是这样的:
谢谢您的回答,但我使用的是Angular 5 | 6,而不是Angular material我也有同样的担忧,Angular material提供了我们需要的所有功能,但仅使用bootstrap可能很难做到。您尝试过的Angular代码在哪里?@MedDiv我找到了一个github项目,我认为这正是我们想要的。
.wrapper-progressBar {
width: 100%
}
.progressBar {
counter-reset: step;
}
.progressBar li {
list-style-type: none;
float: left;
width: 21%;
position: relative;
text-align: center;
}
.progressBar li:before {
cursor:pointer;
content: counter(step);
counter-increment: step;
line-height: 30px;
border-radius: 50%;
width: 30px;
height: 30px;
border: 1px solid #ddd;
display: block;
text-align: center;
margin: 0 auto 10px;
background-color: white
}
.progressBar li:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: #ddd;
top: 15px;
left: -50%;
z-index: -1;
}
.progressBar li:first-child:after {
content: none;
}
.progressBar li.active {
color: green;
}
.progressBar li.active:before {
border-color: green;
background-color: white;
}
.progressBar li.active + li:after {
background-color: green;
}