Hogyan készítsünk egy rugalmas és dinamikus haladási sávot HTML, CSS és JavaScript használatával

Programozás

Pár évvel ezelőtt írtam egy rövid cikket egy érzékeny előrehaladási sáv felépítéséről. A technikáim azóta fejlődtek, így a frissítés rendben van.

A legnagyobb változás az, hogy álelemekre (előtte, utána) már nincs szükség. Most a CSS egyszerűbb, a DOM könnyebben olvasható és sokkal dinamikusabb.

Próbáljuk meg újra.

Célunk egy egyszerű és hatékony reagálósáv létrehozása, amely a következőket teszi:

  • Négy lépés van a befejezésig.
  • Minden lépés egy default, activeés completeállapotát.
  • Haladhat lépésről lépésre a befejezésig.

Nézze meg itt a CodePen-t élő példaként.

A HTML

A redundancia csökkentése és az újrafelhasználhatóság növelése érdekében nyomon követjük az összes állapotot egy Vue komponensben. A DOM-ban ez dinamikusan generál tetszőleges számú szükséges lépést.

Megjegyzés : A natív JavaScript (ECMAScript) vagy bármely más keretrendszer képes ezt megvalósítani. A Vue használata demonstrációs célokat szolgál.

A folyamatjelző sáv alapvető jelölést használ. Van:

  • tároló az aktuális lépés alapján kiszámított osztályokkal: progressClasses
  • statikus háttérpálya: progress__bg
  • egy hurok, amely minden lépést végigvezet és stepClassesaz aktuális lépés alapján alkalmazza .

Minden lépés:

  • a progress__indicatoramely egy ellenőrző ikont tartalmaz, amely látható, ha a lépés befejeződött.
  • a progress__labelamely tartalmazza az adott lépés címkeszövegét.
 {{step.label}} Back Next Step: {{currentStep ? currentStep.label : "Start"}}

Az egyszerűség kedvéért progress__actionsa haladási irányt vezérlő elemek magukba a haladási sávba vannak ágyazva.

A CSS (SCSS)

Itt végezzük a nehéz emelést. Az itt meghatározott osztályokat a JS dinamikusan fogja alkalmazni az aktuális lépés alapján.

Először válasszunk ki néhány színt, amelyekkel működni fog:

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

Most adja meg az .progressosztályt: az a tároló, amely összetartja a folyamatjelző sáv tartalmát.

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

A haladási sávunknak szüksége van arra, .progress__bghogy a haladási lépések sínként futjanak át. Ez szürke lesz, amelyet a színes sáv takar, ahogy halad a következő lépéshez.

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

Mindegyik .progress__steptartalmazza azt a kerek lépést, amelyet kiemel és kitölt az előrehaladási sáv előrehaladtával.

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

Ez tartalmazza a kerek .progress__indicatorés a címke szövegét is .progress__label. Alapértelmezett stílusaikat a .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; }

Most folytassuk a fészkelést .progress__stepújra, és határozzuk meg a lépést aktív állapotában.

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

Ezután adja meg a lépést teljes állapotában. Megjegyzés : az alapértelmezett stílusokat .progress__indicatorés .progress__labelfelülírja a az egész államban.

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

A JavaScript

Mint korábban említettük, ez attól függ, hogy miként valósítja meg a lépéslogikát, a nagyobb kontextust, amelyben megvalósítja, milyen keretrendszereket és mintákat használ, stb.

Ez a példa egy Vue komponenst mutat be:

  • osztályok kiszámítása a haladási sávhoz az aktuális állapot alapján.
  • osztályok kiszámítása minden lépéshez az aktuális állapot alapján.
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}` } } })

Következtetés

Mindennek a végén ez áll:

Nézzen meg élő példát a CodePen-ről.

Ha hasznosnak találod a cikkeimet, fontold meg, hogy a Patreon tagjává válj :)

Vagy ha csak kávét akar nekem venni (imádom a kávét):