1. MDB Home Page
  2. Support Main Page
  3. MDB Standard
Topic: stepper completed

Christian Cazzaro pro asked 3 years ago

Hi

In the stepper, when the step is completed the step number simply turns green. How can I change the step number with an icon check when the step is completed instead?

Thanks

Grzegorz Bujański free answered 3 years ago

You can do it using one of the available events: 

const steps = document.querySelectorAll('.stepper .stepper-step');
steps.forEach((step) => {
  step.addEventListener('onChangeStep.mdb.stepper', () => {
    step.querySelector('.stepper-head-icon').innerHTML = '<i class="fas fa-check"></i>';
  });
});
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 4.4.0
  • Device: MacBook Pro
  • Browser: Chrome
  • OS: iOS
  • Provided sample code: No
  • Provided link: No
Tags
stepper
About author
Christian Cazzaro
Pro User 53Support score
19Questions 3Answers 0Snippets