Wire

UI

Pre-release documentation for v2. If you are looking for the v1 documentation.

Click here

The hold directive enables you to add a hold action to an element, triggering it when the button is held down.

First, you need to install the package via npm or yarn.

1yarn add @wireui/alpinejs-hold-directive
2 
3or
4 
5npm i @wireui/alpinejs-hold-directive --save

Next, you need to register the directive with Alpine.js.

1// resources/js/app.js
2import Alpine from 'alpinejs'
3 
4+ import HoldDirective from '@wireui/alpinejs-hold-directive'
5+ HoldDirective.register(Alpine)
6 
7// or
8 
9+ import { directive } from '@wireui/alpinejs-hold-directive'
10+ Alpine.directive('hold', directive)
11 
12window.Alpine = Alpine
13 
14Alpine.start()

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

1<div class="flex items-center gap-x-3" x-data="{
2 count: 0,
3 plus() { this.count++ },
4 minus() { this.count-- }
5}">
6 <x-button x-hold.click="minus" icon="minus" />
7 
8 <span class="bg-teal-600 text-white px-5 py-1.5 rounded-lg" x-text="count"></span>
9 
10 <x-button x-hold.click="plus" icon="plus" />
11</div>

All modifiers can be used together. Just set the modifier duration after the modifer name, x-hold.delay.500ms .

Modifier Description Default
x-hold.500ms Set the wait time to repeat the action
x-hold.repeat Set the wait time to repeat the action 500ms
x-hold.repeat.500ms Set the wait time to repeat the action
x-hold.delay Set the wait time to start holding 500ms
x-hold.delay.500ms Set the wait time to start holding
x-hold.click Fire the hold action with the click event false