AlpineJS
Many page interactions don't warrant a full server-roundtrip, such as toggling a modal or a hidden element. In these instances, we recommend using AlpineJS.
AlpineJS allows you to add JavaScript behavior directly into your markup in a declarative way. If you are familiar with VueJS, Alpine should feel similar.

Installation

<head>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<!-- The "defer" attribute is important to make sure Alpine waits for CBWIRE to load first. -->
</head>
For more installation information, visit the Alpine Docs.

Templates

Below is an example of using AlpineJS to toggle a list on the page.
<div>
<div x-data="{ open: false }">
<button @click="open = true">Show More...</button>
<ul x-show="open" @click.away="open = false">
<li><button wire:click="archive">Archive</button></li>
<li><button wire:click="delete">Delete</button></li>
</ul>
</div>
</div>
Export as PDF
Copy link
On this page
Installation
Templates