Ako vytvoriť reaktívny a dynamický indikátor priebehu pomocou kódu HTML, CSS a JavaScript

Pred pár rokmi som napísal krátky článok o budovaní responzívnej lišty pokroku. Moje techniky sa odvtedy vyvinuli, a preto je aktualizácia v poriadku.

Najväčšou zmenou je, že pseudo prvky (pred, po) už nie sú potrebné. Teraz je CSS jednoduchší, DOM sa ľahšie číta a je oveľa dynamickejší.

Skúsme to teda ešte raz.

Naším cieľom je vytvoriť jednoduchý a efektívny reagujúci indikátor priebehu, ktorý bude robiť nasledovné:

  • Má štyri kroky k dokončeniu.
  • Každý krok má default, activea completestáť.
  • Môže postupovať krok za krokom až do dokončenia.

Pozrite sa na CodePen tu pre živý príklad.

HTML

Aby sme znížili nadbytočnosť a zvýšili opätovnú použiteľnosť, sledujeme všetky stavy v komponente Vue. V DOM to dynamicky generuje ľubovoľný počet požadovaných krokov.

Poznámka : Môže to dosiahnuť natívny JavaScript (ECMAScript) alebo akýkoľvek iný rámec. Používanie aplikácie Vue slúži na demonštračné účely.

Ukazovateľ priebehu používa základné značky. K dispozícii je:

  • kontajner s vypočítanými triedami na základe aktuálneho kroku: progressClasses
  • stopa statického pozadia: progress__bg
  • slučka, ktorá prechádza každým krokom a aplikuje sa stepClassesna základe aktuálneho kroku.

Každý krok má:

  • a, progress__indicatorktorý obsahuje ikonu kontroly, ktorá je viditeľná, ak je krok dokončený.
  • a, progress__labelktorý obsahuje text štítku pre tento krok.
 {{step.label}} Back Next Step: {{currentStep ? currentStep.label : "Start"}} 

Pre jednoduchosť sú progress__actionsovládacie prvky smerujúce vnorené do samotného ukazovateľa priebehu.

CSS (SCSS)

Tu robíme ťažké zdvíhanie. Tu definované triedy bude JS aplikovať dynamicky na základe aktuálneho kroku.

Najskôr si vyberieme niekoľko farieb, s ktorými budeme pracovať:

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

Teraz definujte .progresstriedu: kontajner, ktorý drží pohromade obsah ukazovateľa priebehu.

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

Náš panel postupu vyžaduje .progress__bg, aby pokrokové kroky prebiehali ako stopa. Pri prechode na ďalší krok bude sivá a zakrytá farebným pruhom.

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

Každý .progress__stepobsahuje okrúhly krok, ktorý sa zvýrazní a vyplní, ako sa bude postupová lišta posúvať.

.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); } } }

Obsahuje tiež okrúhly .progress__indicatortext a text štítku .progress__label. Ich predvolené štýly sú definované mimo .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; }

Poďme teraz pokračovať v vnorení dovnútra .progress__stepa definujme krok v aktívnom stave.

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

Ďalej definujte krok v úplnom stave. Poznámka : predvolené štýly pre .progress__indicatora .progress__labelsú prepísané, keď sú v úplnom stave.

&.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

Ako už bolo spomenuté, bude sa to líšiť v závislosti od toho, ako implementujete krokovú logiku, od väčšieho kontextu, v ktorom je implementovaná, od toho, aké rámce a vzory používate, atď.

Tento príklad používa komponent Vue na demonštráciu:

  • výpočet tried pre indikátor priebehu na základe aktuálneho stavu.
  • výpočet tried pre každý krok na základe aktuálneho stavu.
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}` } } })

Záver

Na konci toho všetkého je toto:

Živý príklad nájdete v CodePen.

Ak považujete moje články za užitočné, zvážte, či sa nestanete členom môjho Patreonu :)

Alebo ak mi chcete kúpiť iba kávu (kávu milujem):