While the framework focuses on only few directives these unlock a great power to comfortably and quickly build interactivity into your websites.
let. Values from x-data are available in all child nodes.
This directive allows us to control the visibility of an element based on the provided boolean value.
This command actually combines a lot of helpful actions. The
@ is an alias for
on-, which allows us to capture events, in this case the form submit event.
With the modifier
prevent we let Alpine.js take care of the default event behaviour, similar to what
event.preventDefault() would do in vanilla JS.
$refs and start the countdown through
This sets a reference to the node, which allows us to access it with the global
$refs variable later on in the code.
Again we are using the
x-show directive to control visibility of our form or the countdown elements.
This is similar to
x-show but can only be applied to
template elements. With the
if directive we can control what elements will be rendered, rather than just setting the display value.
Alpine.js also provides a convenient way to set the
html property of nodes with the respective directives. This will set the content to the value of the variable passed into the directive.
A live example of the complete code is available on JSFiddle.
Code images are generated with carbon.
Cover photo by Sarah Pflug.