frontello-ui-stepper

Stepper

Define dynamicly step states (done, current or todo).

Header

<script src="stepper.js"></script>
<link rel="stylesheet" href="stepper.css">

Body

<nav class="frontello-ui-stepper"></nav>
<script>
document.addEventListener('DOMContentLoaded', () => {
	let stepperElement = document.querySelector('.frontello-ui-stepper');
	stepperElement.addEventListener('init', (event) => {
		console.log('stepper: init');
		console.log(event.detail);
	}, false);
	stepperElement.addEventListener('change', (event) => {
		console.log('stepper: change');
		console.log(event.detail);
	}, false);
	
	let stepper = new Stepper(stepperElement);
	stepper.setStepList([
		'Lorem ipsum dolor sit amet',
		'Duis aute irure dolor',
		'Ut enim ad minim veniam'
	]);
	stepper.setCurrentStep(2);
});
</script>