something

This commit is contained in:
Hlars 2025-03-12 20:38:39 +01:00
parent 3f697f48f0
commit 359e8b3f44
3 changed files with 34 additions and 5 deletions

View File

@ -1,6 +1,6 @@
<div class="step-progress"> <div class="step-progress">
<div class="container" #container> <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) { $index) {
<ng-container> <ng-container>
<div class="check-box" [ngClass]="{ <div class="check-box" [ngClass]="{
@ -16,8 +16,10 @@
</svg> --> </svg> -->
<svg id="checkbox" viewBox="0 0 100 100"> <svg id="checkbox" viewBox="0 0 100 100">
<circle cx="50.5" cy="49" r="46" stroke="red" stroke-width="4" fill="none" /> @if (selectedIndex === i) {
<circle class="circle" cx="50.5" cy="49" r="40" /> <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') { @if (item.status == 'in progress') {
<circle class="inner-circle" cx="50.5" cy="49" r="17" /> <circle class="inner-circle" cx="50.5" cy="49" r="17" />
} }
@ -41,4 +43,14 @@
</ng-container> </ng-container>
} }
</div> </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> </div>

View File

@ -4,12 +4,16 @@
.container { .container {
display: inline-flex; display: inline-flex;
display: flex;
justify-content: center;
width: 100%;
padding: 30px; padding: 30px;
box-sizing: border-box;
position: relative; position: relative;
svg#checkbox { svg#checkbox {
width: 28px; width: 33px;
height: 28px; height: 33px;
stroke: #23c274; stroke: #23c274;
stroke-width: 6; stroke-width: 6;
@ -31,6 +35,15 @@
fill 0.5s 0.3s cubic-bezier(0.45, 0, 0.55, 1); 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 { .check {
stroke-dasharray: 70; stroke-dasharray: 70;
stroke-dashoffset: 70; stroke-dashoffset: 70;
@ -43,6 +56,7 @@
.check-box { .check-box {
display: flex; display: flex;
flex-grow: 1;
align-items: center; align-items: center;
position: relative; position: relative;
@ -89,6 +103,7 @@
.progress-line { .progress-line {
width: 140px; width: 140px;
flex-grow: 1;
margin: 0 10px; margin: 0 10px;
height: 4px; height: 4px;
overflow: hidden; overflow: hidden;

View File

@ -8,5 +8,7 @@ import { Component } from '@angular/core';
styleUrl: './progress-stepper.component.scss' styleUrl: './progress-stepper.component.scss'
}) })
export class ProgressStepperComponent { export class ProgressStepperComponent {
selectedIndex = 0;
test = { status: 'Offen' };
} }