angular-comment-mentions/src/app/progress-stepper/progress-stepper.component.html
2025-03-12 20:38:39 +01:00

56 lines
2.3 KiB
HTML

<div class="step-progress">
<div class="container" #container>
@for (item of [{status: 'completed'}, {status: 'in progress'}, test]; track item; let i =
$index) {
<ng-container>
<div class="check-box" [ngClass]="{
complete: item.status === 'completed',
active: item.status === 'in progress'
}">
<!-- <svg id="checkbox" viewBox="0 0 100 100">
<circle class="circle" cx="50.5" cy="49" r="45" />
@if (item.status == 'in progress') {
<circle class="inner-circle" cx="50.5" cy="49" r="17" />
}
<polyline class="check" points="28.5,51.9 41.9,65.3 72.5,32.8 " />
</svg> -->
<svg id="checkbox" viewBox="0 0 100 100">
@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" />
}
<polyline class="check" points="28.5,51.9 41.9,65.3 72.5,32.8 " />
</svg>
<div [ngClass]="{
complete: item.status === 'completed',
active: item.status === 'in progress'
}" class="progress-line">
<div class="progress-percent"></div>
</div>
<div class="info">
<span class="step">step {{ i + 1 }}</span>
<span class="progress-info" [ngClass]="{
'completed': item.status === 'completed',
'in-progress': item.status === 'in progress'
}">{{ item.status }}</span>
</div>
</div>
</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>