Table of contents
UPDATE: There are examples hosted on http://www.alpinetoolbox.com/.
Example – drop-down
The first examples on their page are very promising, e.g. creating a dropdown that appears after clicking a button and disappears when clicking outside the modal, requires just several attributes:
Create and export timeline graphs using an online tool
The first line with
x-data inits an Alpine component. It will consist of one property:
open, initialized to
The second line adds an event handler to a button. When it is clicked, it changes the component’s property
@click is a shortcut from
The third line adds two behaviors. Firstly, it binds the visibility of
ul to the value of the
open property. So initially, when
ul element is hidden, and after clicking the button, the element appears.
Secondly, it adds a very neat functionality to set
open=false and consequently, hide the
ul element, when a user clicks away (outside) from that element.
Note that by adding one more word, we can add animation when the drop-down is appearing and appearing. Just replace
Example – tabs
How about adding tabs to a page? Let me again explain an example from the documentation page:
The beginning is similar – we create a new Alpine component with the property
tab equal to
'foo'. It will store the name of the currently visible tab.
Then there are two buttons with are the tab headers: Foo and Bar. Each has a click behavior to update the state and also an attribute to mark that tab button active. Namely,
:class (shortcut from
bind:class), listens to changes in the component’s state and adds or removes CSS classes from the element. In this case, a button will have the
active CSS class if the currently selected tab is
'bar'. This means that exactly one button at any moment will have the
active class and can be styled to mark the selection.
Finally, there are two divs with conditional visibility. Exactly one
div will be shown, matching the
button that was last clicked.
And again – it is possible to create a tab component with very clear and minimal inline markup.
As a quick test of the library, I created a simple TODO application:
- line 3: I decided to import the Alpine.js library from a CDN. Another option is installing the npm package and building it locally using a bundler / build tool. It is not explained here and not in the documentation yet, but I found some information in this article (apparently Todo applications are best to try a new framework…).
- line 5: my component will have two properties: a list with tasks (
items) and information whether the panel to add a new task is visible (
- line 6: a for loop is available in Alpine.js, too. The usage is simple: a
keyproperties. The contents inside will be repeated for every element in the
itemsarray. I think only one child element should be used like here (a
div); when I had
buttondirectly inside the
template, Alpine rendered first all
spans then all
- line 8: it will display the item inside
x-textsets the inner text, whereas
x-htmlsets the inner HTML.
- line 9: when clicking the DEL button, I remove that
itemscollection which results in removing the item from the screen.
- line 13: when clicking the ADD button, the
divbelow will be shown.
- line 14:
x-show.transitioncontrols the visibility of the div, as explained in the first example. The
transitionparameter adds animation.
- line 16: this is an input field to enter the new task’s name. There are two new things:
x-model="name"allows storing the value from this field in a special Alpine’s variable. In fact, it is a two-way binding which I’ll use soon.
x-on:keyup) adds a key up event handler. I use
$refs.okto refer to the HTML element which I named
x-refbelow. It is simpler than using document.getElementById() or another way to refer to the element. Next, I set the
disabledproperty of that element to
trueif the length of the
namevariable (and therefore the contents of the input field) is zero. Thanks to this binding I disable the OK button if the field is empty and I enable it otherwise.
- line 18: this button will close the adding task panel. I didn’t reset the
namevariable intentionally, so the value will remain in the field after reopening the panel.
- line 19: clicking the OK button will do three things: hide the panel (
adding=false), add the new task to the list (
items.push(name)– the list will be automatically refreshed) and clear the field (
name = ''). I also added a reference to this button under the name of
x-refattribute. I used it above.
Fixing the OK button
The previous example had one issue – the OK button was not correctly disabled when opening the panel. To fix it, I added two more things:
- line 5:
x-initallows executing code after the component is initialized. Here I disable the button when the page loads.
- line 19: I added
$refs.ok.disabled = trueto disable the button after clicking OK. Apparently clearing the
namevariable was not sufficient.
Full source code is available in a Gist.