A controller for creating stepwise UI. Inspired by ember-steps.
$ npm i alpinejs-steps
With the download you'll find the following directoryies and files, with both compiled and minified versions.
Download contents
```text
debug-console/dist/
├── steps.bundle.js
├── steps.bundle.js.map
├── steps.bundle.min.js
├── steps.bundle.min.js.map
├── steps.esm.js
├── steps.esm.js.map
├── steps.esm.min.js
├── steps.esm.min.js.map
├── steps.js
├── steps.js.map
├── steps.min.js
└── steps.min.js.map
```
node app.js
import Alpine from `alpinejs`
import { StepsComponent } from 'alpinejs-steps';
Alpine.data('steps', StepsComponent)
// OR
Alpine.data('tabs', StepsComponent)
// OR
Alpine.data('wizard', StepsComponent)
// OR
Alpine.data('carousel', StepsComponent)
Alpine.start()browser indext.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script
src="https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js"
defer="true"
></script>
<script src="https://unpkg.com/alpinejs-steps@latest/dist/steps.bundle.min.js"></script>
</head>
<body>
<section>
<h3>Basic usage</h3>
<div x-data="steps(['first step', 'second step', 'third step'])">
<div>
<div x-show="isActive('first step')">first step</div>
<div x-show="isActive('second step')">second step</div>
<div x-show="isActive('third step')">third step</div>
</div>
<div>
<button x-on:click="transitionToPrevious()" type="button">
Previous
</button>
<button x-on:click="transitionToNext()" type="button">Next</button>
</div>
</div>
</section>
<script>
document.addEventListener("alpine:init", () => {
Alpine.data("steps", AlpineSteps.StepsComponent);
});
</script>
</body>
</html>The above examples show the basic idea, but there're other ways to use it. Take a look at the tutorials for some examples.
Even though it is built with AlpineJs in mind. Because of how decoupled it is, integration with other projects focused on server rendered html, like Stimulus.
Code copyright 2021–2022. Code released under the MIT License.