something
This commit is contained in:
parent
3f697f48f0
commit
359e8b3f44
@ -1,6 +1,6 @@
|
||||
<div class="step-progress">
|
||||
<div class="container" #container>
|
||||
@for (item of [{status: 'completed'}, {status: 'in progress'}, {status: 'Offen'}]; track item; let i =
|
||||
@for (item of [{status: 'completed'}, {status: 'in progress'}, test]; track item; let i =
|
||||
$index) {
|
||||
<ng-container>
|
||||
<div class="check-box" [ngClass]="{
|
||||
@ -16,8 +16,10 @@
|
||||
</svg> -->
|
||||
|
||||
<svg id="checkbox" viewBox="0 0 100 100">
|
||||
<circle cx="50.5" cy="49" r="46" stroke="red" stroke-width="4" fill="none" />
|
||||
<circle class="circle" cx="50.5" cy="49" r="40" />
|
||||
@if (selectedIndex === i) {
|
||||
<circle class="selection-circle" cx="50.5" cy="49" r="40" stroke-width="8" fill="none" />
|
||||
}
|
||||
<circle class="circle" cx="50.5" cy="49" r="34" />
|
||||
@if (item.status == 'in progress') {
|
||||
<circle class="inner-circle" cx="50.5" cy="49" r="17" />
|
||||
}
|
||||
@ -41,4 +43,14 @@
|
||||
</ng-container>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div (click)="selectedIndex = selectedIndex + 1">next</div>
|
||||
<div (click)="selectedIndex = selectedIndex - 1">prev</div>
|
||||
|
||||
<div>
|
||||
<button (click)="test.status = 'open'">open</button>
|
||||
<button (click)="test.status = 'in progress'">progress</button>
|
||||
<button (click)="test.status = 'completed'">complete</button>
|
||||
</div>
|
@ -4,12 +4,16 @@
|
||||
|
||||
.container {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
svg#checkbox {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
stroke: #23c274;
|
||||
stroke-width: 6;
|
||||
|
||||
@ -31,6 +35,15 @@
|
||||
fill 0.5s 0.3s cubic-bezier(0.45, 0, 0.55, 1);
|
||||
}
|
||||
|
||||
.selection-circle {
|
||||
// stroke-dasharray: 320;
|
||||
// stroke-dashoffset: 320;
|
||||
stroke: rebeccapurple;
|
||||
transition:
|
||||
stroke-dashoffset 0.5s,
|
||||
fill 0.5s 0.3s cubic-bezier(0.45, 0, 0.55, 1);
|
||||
}
|
||||
|
||||
.check {
|
||||
stroke-dasharray: 70;
|
||||
stroke-dashoffset: 70;
|
||||
@ -43,6 +56,7 @@
|
||||
|
||||
.check-box {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
@ -89,6 +103,7 @@
|
||||
|
||||
.progress-line {
|
||||
width: 140px;
|
||||
flex-grow: 1;
|
||||
margin: 0 10px;
|
||||
height: 4px;
|
||||
overflow: hidden;
|
||||
|
@ -8,5 +8,7 @@ import { Component } from '@angular/core';
|
||||
styleUrl: './progress-stepper.component.scss'
|
||||
})
|
||||
export class ProgressStepperComponent {
|
||||
selectedIndex = 0;
|
||||
|
||||
test = { status: 'Offen' };
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user