@wireui/alpinejs-hold-directive v1.0.1

Alpine.js Hold Directive

🔥 Hold Directive

The hold directive allows you to add a hold action to an element and call it when the button is holding.

📚 Get Started

Prerequisites:

• Alpinejs 3.10+

Install

yarn add @wireui/alpinejs-hold-directive

or

npm i @wireui/alpinejs-hold-directive --save

Configure

// resources/js/app.js
import Alpine from 'alpinejs'

+ import HoldDirective from '@wireui/alpinejs-hold-directive'
+ HoldDirective.register(Alpine)

// or

+ import { directive } from '@wireui/alpinejs-hold-directive'
+ Alpine.directive('hold', directive)

window.Alpine = Alpine

Alpine.start()

How to use it?

You can use the x-hold directive to call any alpine.js action.

<div x-data="{
    count: 0,
    plus() { this.count++ },
    minus() { this.count-- }
}">
    <button x-hold.click="minus">Minus</button>
    <input x-model="count">
    <button x-hold.click="plus">Plus</button>
</div>

Directive API

All modifiers can be used together.

Just set the modifier duration after the modifer name, x-hold.delay.500ms.

Stay informed, follow @ph7jack on Twitter.

There will you see all the latest news about features, ideas, discussions and more...

WireUI is and will always be FREE to anyone who would like to use it.

This project is created Pedro Oliveira, and it is maintained by the author with the help of the community.

All contributions are welcome!

License

MIT