Simple Stepper With Alpine.js

Image for post
Image for post
Alpine.js Logo

Steps

<link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.8.0/alpine.js"></script>
<div x-data="{name: 'bob'}">
<span id="name" x-html="name"><span>
<!-- Renders bob to the span's innerHTML -->
</div>
Image for post
Image for post
Two ways to use x-bind
<div x-data="dropdown()">
<button x-spread="trigger">Open Dropdown</button>

<span x-spread="dialogue">Dropdown Contents</span>
</div>

<script>
function dropdown() {
return {
open: false,
trigger: {
['@click']() {
this.open = true
},
},
dialogue: {
['x-show']() {
return this.open
},
['@click.away']() {
this.open = false
},
}
}
}
</script>
[x-cloak] { display: none; }

Written by

Front-end Web Developer. Language lover. Traveler. Dude.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store