toolkit
toolkit copied to clipboard
A set of directives and magic properties for Alpine.js
Alpine toolkit
A set of directives and magic properties for Alpine.js V3.
About
This package provides the following directives and helpers:
Helper | Description |
---|---|
$dbg | A magic helper to assist in debugging Alpine.js components. |
$interval | A magic helper to run a function every n milliseconds in Alpine.Js. |
$range | A magic helper to generate an array containing a range of elements in Alpine.js. |
$screen | A magic helper to detect if the current browser width is equal or greater than a given breakpoint in Alpine.Js. |
$scroll | A magic helper to generate to scroll the viewport in Alpine.Js |
$truncate | A magic helper to truncate a string in Alpine.js. |
Each helper can also be used independently.
Installation
Include the following <script>
tag in the <head>
of your document, before Alpine:
<script src="https://unpkg.com/@alpine-collective/[email protected]/dist/cdn.min.js" defer></script>
or
<script src="https://cdn.jsdelivr.net/npm/@alpine-collective/[email protected]/dist/cdn.min.js" defer></script>
NPM
If you would like to bundle the plugin yourself, install it via NPM:
npm install @alpine-collective/toolkit --save
You can then register the plugin with Alpine:
import Alpine from 'alpinejs'
import Toolkit from '@alpine-collective/toolkit'
Alpine.plugin(Toolkit)
Alpine.start()