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
éscomplete
á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
stepClasses
az aktuális lépés alapján alkalmazza .
Minden lépés:
- a
progress__indicator
amely egy ellenőrző ikont tartalmaz, amely látható, ha a lépés befejeződött. - a
progress__label
amely 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__actions
a 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 .progress
osztá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__bg
hogy 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__step
tartalmazza 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__label
felü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):