כיצד לבנות סרגל התקדמות רספונסיבי ודינמי עם HTML, CSS ו- JavaScript

לפני כמה שנים כתבתי מאמר קצר על בניית סרגל התקדמות רספונסיבי. הטכניקות שלי התפתחו מאז, ולכן עדכון מסודר.

השינוי הגדול ביותר הוא שאלמנטים פסאודו (לפני, אחרי) כבר לא נדרשים. עכשיו ה- CSS פשוט יותר, ה- DOM קל יותר לקריאה וזה הרבה יותר דינמי.

אז בואו ננסה את זה שוב.

מטרתנו היא לבנות סרגל התקדמות תגובה פשוט ויעיל שעושה את הפעולות הבאות:

  • בעל ארבעה שלבים לסיום.
  • יש כל צעד default, active, ו completeהמדינה.
  • יכול להתקדם משלב לשלב עד לסיומו.

עיין ב- CodePen כאן לקבלת דוגמה חיה.

ה- HTML

כדי להפחית יתירות ולהגדיל את השימוש החוזר, אנו עוקבים אחר כל המצב ברכיב Vue. ב- DOM, זה יוצר באופן דינמי מספר שלבים נדרש.

הערה : JavaScript מקורי (ECMAScript) או כל מסגרת אחרת יכולים להשיג זאת. השימוש ב- Vue הוא למטרות הדגמה.

סרגל ההתקדמות משתמש בסימון בסיסי. יש:

  • מיכל עם מחלקות מחושבות המבוסס על השלב הנוכחי: progressClasses
  • מסלול רקע סטטי: progress__bg
  • לולאה שמתחזרת בכל שלב ומתאימה על stepClassesבסיס הצעד הנוכחי.

לכל שלב יש:

  • a progress__indicatorשמכיל סמל סימון שנראה אם ​​השלמה הושלמה.
  • a progress__labelהמכיל את טקסט התווית לאותו שלב.
 {{step.label}} Back Next Step: {{currentStep ? currentStep.label : "Start"}} 

למען הפשטות, progress__actionsהשולט בכיוון הנסיעה מקונן בתוך סרגל ההתקדמות עצמו.

CSS (SCSS)

זה המקום בו אנו מבצעים את ההרמה הכבדה. השיעורים המוגדרים כאן יוחלו באופן דינמי על ידי ה- JS בהתבסס על השלב הנוכחי.

ראשית, בואו לבחור כמה צבעים לעבוד איתם:

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

כעת הגדירו את .progressהמחלקה: המיכל המחזיק את תוכן סרגל ההתקדמות יחד.

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

סרגל ההתקדמות שלנו צריך .progress__bgששלבי ההתקדמות יעבור כמו מסלול. זה יהיה אפור, מכוסה על ידי הפס הצבעוני כשהוא מתקדם לשלב הבא.

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

כל אחד מהם .progress__stepמכיל את הצעד העגול שיבליט וימלא ככל שמתקדמים בסרגל ההתקדמות.

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

הוא מכיל גם את .progress__indicatorהטקסט העגול והתווית .progress__label. סגנונות ברירת המחדל שלהם מוגדרים מחוץ ל- .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; }

בואו נמשיך לקנן .progress__stepשוב בפנים ולהגדיר את הצעד במצבו הפעיל .

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

לאחר מכן, הגדירו את השלב במצבו השלם . הערה : סגנונות ברירת המחדל עבור .progress__indicatorו .progress__labelמוחלפים כאשר במצב השלם.

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

כפי שצוין קודם לכן, זה ישתנה בהתאם לאופן שבו אתה מיישם את הלוגיקה הצעדית, ההקשר הגדול יותר בו הוא מיושם, באילו מסגרות ודפוסים אתה משתמש וכו '.

דוגמה זו משתמשת ברכיב Vue כדי להדגים:

  • חישוב כיתות עבור סרגל ההתקדמות בהתבסס על המצב הנוכחי.
  • חישוב שיעורים לכל שלב בהתבסס על המצב הנוכחי.
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}` } } })

סיכום

בסופו של דבר יש לך את זה:

עיין ב- CodePen לדוגמא חיה.

אם אתה מוצא את המאמרים שלי שימושיים, שקול להיות חבר בפטרון שלי :)

או אם אתה רק רוצה לקנות לי קפה (אני אוהב קפה):