Skip to content

Latest commit

 

History

History
31 lines (21 loc) · 924 Bytes

README.md

File metadata and controls

31 lines (21 loc) · 924 Bytes

Alpine Arrow Focus

An Alpine package for building menu screens that can be navigated using arrows, by replicating the tab focus behavior.

Usage

<div x-data="arrow_focus()">
    <button x-spread="item" class="p-8 focus:bg-gray-500">First item</button>
    <button x-spread="item" class="p-8 focus:bg-gray-500">Second item</button>
    <button x-spread="item" class="p-8 focus:bg-gray-500">Third item</button>
</div>

Pressing the up & down keys will now switch between items. When the down key is pressed on the last item, the first item will get selected. When the up key is pressed on the first item, the last key will get selected.

Installation

CDN

<script src="https://unpkg.com/@leanadmin/alpine-arrow-focus@0.1.1/cdn.js" type="module"></script>

Node.js

import { arrow_focus } from '@leanadmin/alpine-arrow-focus';

// If needed: window.arrow_focus = arrow_focus;