ایجاد یک کامپوننت پله ای پیشرفت (مناسب برای فرم ها)

مؤلفه پله‌ای پیشرفت ابزاری است که در فرم‌هایی برای ساده‌سازی تعامل کاربر با تقسیم وظایف به مراحل قابل مدیریت اضافه می‌شود. ناوبری ساده ارائه می دهد، پیشرفت را به صورت بصری دنبال می کند و تجربه کاربر را افزایش می دهد.

این آموزش ساخت کامپوننت پله ای پیشرفت با HTML، CSS و جاوا اسکریپت را پوشش می دهد.

ساختار HTML

ساختار HTML از عناصر زیر تشکیل خواهد شد:

• چهار عنصر div دایره ای برای نشان دادن 4 مرحله در فرآیند ناوبری.
• دو میله افقی
• قبلی و بعد دکمه هایی برای پیمایش بین مراحل.
• یک جزء پیام برای نمایش هرگونه پیام اطلاعاتی.

1

    <div class="container">

2

      <div class="progress-container">

3

        <div class="progress-bar"></div>

4

        <div class="status-bar"></div>

5

6

        <div class="circle active">

7

          <span> Step 1</span>

8

          <i class="fa-solid fa-check"></i>

9

        </div>

10

        <div class="circle">

11

          <span> Step 2</span>

12

          <i class="fa-solid fa-check"></i>

13

        </div>

14

        <div class="circle">

15

          <span> Step 3</span>

16

          <i class="fa-solid fa-check"></i>

17

        </div>

18

        <div class="circle">

19

          <span> Step 4</span>

20

          <i class="fa-solid fa-check"></i>

21

        </div>

22

      </div>

23

      <div class="buttons">

24

        <button class="prev-btn">Previous</button>

25

        <button class="next-btn">Next</button>

26

        <button class="submit">Submit</button>

27

      </div>

28

    </div>

29

30

    <div class="message">

31

      <i class="fa-solid fa-check"></i>

32

      <p>Your details have been submitted</p>

33

    </div>

استایل دهی با CSS

بیایید با اعمال سبک های زیر روی بدنه شروع کنیم تا مطمئن شویم که محتوا در مرکز قرار دارد.

1

body {

2

    min-height: 100vh;

3

    background-color: rgb(231, 233, 242);

4

    display: flex;

5

    justify-content: center;

6

    align-items: center;

7

    font-family: "Roboto", sans-serif;

8

  }

سپس، ما یک ظرف برای نگهداری تمام عناصر خود خواهیم داشت:

1

.container {

2

    width: 700px;

3

    height: 300px;

4

  }

ما ظرف دیگری خواهیم داشت که از Flexbox استفاده می کند تا اطمینان حاصل شود که دایره هایی که مراحل مختلف را به طور مساوی در امتداد محور افقی قرار می دهند.

1

.progress-container {

2

    width: 100%;

3

    display: flex;

4

    justify-content: space-between;

5

    margin: 50px auto;

6

    position: relative;

7

  }

بیایید با ارائه ابعاد مساوی و شعاع مرزی، عناصر div که مراحل را نشان می‌دهند، دایره‌ای در آوریم.

1

.circle  {

2

    width: 50px;

3

    height: 50px;

4

    background-color: white;

5

    border-radius: 50%;

6

    position: relative;

7

  }

همچنین باید اطمینان حاصل کنیم که نمادها در مرکز دایره ها قرار گرفته اند و دهانه مستقیماً زیر دایره مربوطه خود قرار دارد. به طور پیش فرض، تمام نمادها نامرئی خواهند بود.

1

  .circle span {

2

    position: absolute;

3

    top: 150%;

4

    left: 9%;

5

    color: #141d0d;

6

7

  }

8

9

  .circle i {

10

    position: absolute;

11

    top: 35%;

12

    left: 35%;

13

    display: none;

14

15

  }

به طور پیش فرض، اولین دایره دارای نماد قابل مشاهده است و همچنین دارای پس زمینه سبز است.

1

.circle.active i {

2

    display: block;

3

  }

4

5

  .active {

6

    display: block;

7

    background-color: #43880f;

8

  }

دکمه ها دارای سبک های زیر خواهند بود.

1

.buttons {

2

  display: flex;

3

  justify-content: center;

4

  align-items: center;

5

  position: relative;

6

}

7

button {

8

  color: white;

9

  width: 100px;

10

  padding: 10px 20px;

11

  margin: 20px auto;

12

  border-radius: 3px;

13

  background-color: #43880f;

14

  border: none;

15

}

16

.next {

17

  color: white;

18

  /* background-color: rgb(87, 87, 202); */

19

}

20

.submit {

21

  display: none;

22

}

23

button:disabled {

24

  cursor: not-allowed;

25

  background-color: gray;

26

}

به طور پیش فرض، دکمه ارسال مخفی خواهد بود. زمانی نمایش داده می شود که کاربر تمام مراحل مورد نیاز را به پایان برساند.

نوارهای افقی (نوار پیشرفت و نوار وضعیت) در پشت دایره ها قرار می گیرند. نوار اول (.progress-bar) غیر فعال خواهد بود، در حالی که نوار دوم (.status-bar) طول بسته به پیشرفت کاربر متحرک خواهد شد.

1

.progress-bar {

2

width: 99%;

3

height: 5px;

4

background-color: grey;

5

position: absolute;

6

top: 50%;

7

left: 0;

8

9

z-index: -1;

10

}

11

.status-bar {

12

width: 100%;

13

height: 5px;

14

background-color: transparent;

15

position: absolute;

16

top: 50%;

17

left: 0;

18

z-index: -1;

19

}

20

.animate {

21

animation: fill 0.5s ease-in-out 0.4s forwards;

22

}

23

24

@keyframes fill {

25

100% {

26

  box-shadow: inset 0px 0px 0px 30px #43880f;

27

}

28

}

در نهایت مولفه پیام دارای سبک های زیر خواهد بود و به طور پیش فرض مخفی می شود:

1

.message {

2

    width: 500px;

3

    height: 300px;

4

    border-radius: 5px;

5

    border: 2px solid;

6

    gap: 10px;

7

    display: block;

8

    text-align: center;

9

    padding: 100px 5px;

10

    display: none;

11

  }

12

13

  .message i {

14

    margin-bottom: 50px;

15

    font-size: 25px;

16

    padding: 20px 20px;

17

    background-color: rgb(230, 111, 196);

18

    border-radius: 50%;

19

    animation: fillIcon 0.8s ease alternate;

20

  }

21

        @keyframes fillIcon {

22

    0% {

23

      transform: scale(1);

24

    }

25

    100% {

26

      transform: scale(1.2);

27

    }

28

  }

عملکرد جاوا اسکریپت

وقت آن است که این کار را شروع کنید! اولین کاری که باید انجام دهیم این است که عناصر را بدست آوریم:

1

const progressBar = document.querySelectorAll(".progress-bar")[0];

2

const StatusBar = document.querySelectorAll(".status-bar")[0];

3

4

const circles = document.querySelectorAll(".circle");

5

const previousBtn = document.querySelector(".prev-btn");

6

const nextBtn = document.querySelector(".next-btn");

7

const submitBtn = document.querySelector(".submit");

8

const message = document.querySelector(".message");

یک متغیر ایجاد کنید currentStepIndex برای پیگیری گام فعال فعلی در مؤلفه پیشرفت ما.

1

let activeStepperIndex = 0;

در مرحله بعد، یک شنونده رویداد کلیک کنید بعد دکمه. هنگامی که دکمه کلیک می شود، currentStepIndex 1 افزایش می یابد و به طور موثر نشانگر پیشرفت را به مرحله بعدی منتقل می کند.

1

nextBtn.addEventListener("click", function () {

2

  activeStepperIndex++;

3

  updateStepper();

4

});

این UpdateStepper() تابع نماد بررسی را بسته به مقدار جدید نشان می دهد currentStepIndex.

تابعی به نام تعریف کنید updateStepper().

1

function updateStepper() {

2

      circles.forEach((circle, index) => {

3

        const textI = circle.querySelector("i");

4

        if (index === activeStepperIndex) {

5

          previousBtn.style.backgroundColor = "grey";

6

          textI.style.display = "block";

7

          circle.classList.add("animate");

8

        }

9

        if (activeStepperIndex === 3) {

10

          nextBtn.style.display = "none";

11

          submitBtn.style.display = "block";

12

        }

13

      });

14

      // previousBtn.disabled = activeStepperIndex === 0;

15

    }

در داخل تابع، ما از داخلی استفاده خواهیم کرد forEach() روشی برای تکرار در هر دایره

• اگر شاخص فعلی مطابقت داشته باشد activeStepperIndex، آیکون چک را به دایره مربوطه نمایش می دهیم و دایره را نیز متحرک می کنیم.
• اگر activeStepperIndex آخرین مورد است، ما دکمه Next را مخفی می کنیم و دکمه ارسال را نمایش می دهیم.

همچنین می خواهیم نمایش تصویری نوار وضعیت را نشان دهیم. به روز رسانی شنونده رویداد برای بعد همانطور که در زیر نشان داده شده است.

1

nextBtn.addEventListener("click", function () {

2

      activeStepperIndex++;

3

      console.log(activeStepperIndex);

4

      const percentageWidth =

5

        (activeStepperIndex / (circles.length - 1)) * 100;

6

      StatusBar.style.width = percentageWidth + "%";

7

      StatusBar.style.backgroundColor = "green";

8

9

10

      updateStepper();

11

      previousBtn.disabled = true;

12

    });

بصری رنگ سبز را اضافه می کند backgroundColor برای نشان دادن پیشرفت انجام شده از طریق نوار. عرض با تقسیم به دست می آید activeStepperIndex با تعداد کل مراحل (circles.length - 1 برای تنظیم نمایه سازی مبتنی بر صفر) و ضرب در 100 برای بدست آوردن مقدار به درصد.

به عنوان مثال، اگر پله در مرحله 2 باشد، عرض 33.3٪ و غیره خواهد بود.

در نهایت، هنگامی که دکمه ارسال علامت زده شد، مؤلفه پیام را به کاربر نمایش می‌دهیم و به او اطلاع می‌دهیم که جزئیات با موفقیت ارسال شده است.

بیایید یک رویداد اضافه کنیم شنونده به دکمه ارسال

1

const message = document.querySelector(".message");

2

const container = document.querySelector(".container");

3

4

submitBtn.addEventListener("click", function () {

5

  message.style.display = "block";

6

  container.style.display = "none";

7

});

8

});

در داخل تابع، ما مؤلفه پیام را قابل مشاهده می کنیم در حالی که مؤلفه استپر را پنهان می کنیم.

نتیجه

در این آموزش یاد گرفتیم که چگونه یک کامپوننت پله ای بدون هیچ فریمورک اضافی بسازیم. امیدواریم اکنون بتوانید اجزای پله ای پیشرفته تری ایجاد کنید.