Sådan opbygges en lydhør og dynamisk statuslinje med HTML, CSS og JavaScript

For et par år tilbage skrev jeg en kort artikel om opbygning af en lydhør fremdriftslinje. Mine teknikker har udviklet sig siden da, og så er en opdatering i orden.

Den største ændring er, at der ikke længere kræves pseudo-elementer (før, efter). Nu er CSS mere ligetil, DOM er lettere at læse, og det er meget mere dynamisk.

Så lad os prøve dette igen.

Vores mål er at opbygge en enkel og effektiv responsiv statuslinje, der gør følgende:

  • Har fire trin til afslutning.
  • Hvert trin har en default, activeog completestat.
  • Kan gå videre fra trin til trin, indtil det er afsluttet.

Tjek CodePen her for et liveeksempel.

HTML

For at reducere redundans og øge genanvendelighed sporer vi alle tilstander i en Vue-komponent. I DOM genererer dette dynamisk et vilkårligt antal nødvendige trin.

Bemærk : Native JavaScript (ECMAScript) eller andre rammer kan opnå dette. Brugen af ​​Vue er til demonstrative formål.

Statuslinjen bruger grundlæggende markering. Der er:

  • en container med beregnede klasser baseret på det aktuelle trin: progressClasses
  • et statisk baggrundsspor: progress__bg
  • en sløjfe, der gentager hvert trin og anvender stepClassesbaseret på det aktuelle trin.

Hvert trin har:

  • a progress__indicatorder indeholder et afkrydsningsikon, der er synligt, hvis trinnet er gennemført
  • a, progress__labelder indeholder etiketteksten til det trin.
 {{step.label}} Back Next Step: {{currentStep ? currentStep.label : "Start"}} 

For enkelheds skyld er den, progress__actionsder styrer kørselsretningen, indlejret i selve statuslinjen.

CSS (SCSS)

Det er her, vi løfter det tunge. De her definerede klasser anvendes dynamisk af JS baseret på det aktuelle trin.

Lad os først vælge nogle farver at arbejde med:

$gray: #E5E5E5; $gray2: #808080; $blue: #2183DD; $green: #009900; $white: #FFFFFF;

Definer nu .progressklassen: beholderen, der holder statuslinjens indhold sammen.

.progress { position: absolute; top: 15vh; width: 0%; height: 10px; background-color: $blue; transition: width .2s; }

Vores statuslinje har brug for en .progress__bg, at fremskridtstrinene løber over som et spor. Denne vil være grå, dækket af den farvede bjælke, når den går videre til næste trin.

.progress__bg { position: absolute; width: 100vw; height: 10px; background-color: $gray; z-index: -1; }

Hver .progress__stepindeholder det runde trin, der fremhæves og udfyldes, når statuslinjen skrider frem.

.progress__step { position: absolute; top: -8px; left: 0; display: flex; flex-direction: column; align-items: center; text-align: center; @for $i from 1 through 5 { &.progress__step--#{$i} { left: calc(#{$i * 20}vw - 9px); } } }

Den indeholder også den runde .progress__indicatorog etiketteksten .progress__label. Deres standardformater defineres uden for .progress__step.

.progress__indicator { width: 25px; height: 25px; border: 2px solid $gray2; border-radius: 50%; background-color: $white; margin-bottom: 10px; .fa { display: none; font-size: 16px; color: $white; } } .progress__label { position: absolute; top: 40px; }

Lad os nu fortsætte med at rede inde .progress__stepigen og definere trinnet i sin aktive tilstand.

&.progress__step--active { color: $blue; font-weight: 600; }

Derefter defineres trinnet i dets komplette tilstand. Bemærk : standardformaterne for .progress__indicatorog .progress__labeloverskrives i fuldstændig tilstand.

&.progress__step--complete { .progress__indicator { background-color: $green; border-color: $blue; color: $white; display: flex; align-items: center; justify-content: center; } .progress__indicator .fa { display: block; } .progress__label { font-weight: 600; color: $green; } }

JavaScript

Som nævnt tidligere vil dette variere afhængigt af, hvordan du implementerer trinlogikken, den større kontekst, den er implementeret i, hvilke rammer og mønstre du bruger osv.

Dette eksempel bruger en Vue-komponent til at demonstrere:

  • beregning af klasser for statuslinjen baseret på den aktuelle tilstand.
  • beregning af klasser for hvert trin baseret på den aktuelle tilstand.
var app = new Vue({ el: '#app', data: { currentStep: null, steps: [ {"label": "one"}, {"label": "two"}, {"label": "three"}, {"label": "complete"} ] }, methods: { nextStep(next=true) { const steps = this.steps const currentStep = this.currentStep const currentIndex = steps.indexOf(currentStep) // handle back if (!next) { if (currentStep && currentStep.label === 'complete') { return this.currentStep = steps[steps.length - 1] } if (steps[currentIndex - 1]) { return this.currentStep = steps[currentIndex - 1] } return this.currentStep = { "label": "start" } } // handle next if (this.currentStep && this.currentStep.label === 'complete') { return this.currentStep = { "label": "start" } } if (steps[currentIndex + 1]) { return this.currentStep = steps[currentIndex + 1] } this.currentStep = { "label": "complete" } }, stepClasses(index) { let result = `progress__step progress__step--${index + 1} ` if (this.currentStep && this.currentStep.label === 'complete' || index < this.steps.indexOf(this.currentStep)) { return result += 'progress__step--complete' } if (index === this.steps.indexOf(this.currentStep)) { return result += 'progress__step--active' } return result } }, computed: { progressClasses() { let result = 'progress ' if (this.currentStep && this.currentStep.label === 'complete') { return result += 'progress--complete' } return result += `progress--${this.steps.indexOf(this.currentStep) + 1}` } } })

Konklusion

I slutningen af ​​det hele har du dette:

Tjek CodePen for et liveeksempel.

Hvis du finder mine artikler nyttige, kan du overveje at blive medlem af min Patreon :)

Eller hvis du bare vil købe kaffe til mig (jeg elsker kaffe):