@awcodes/alpine-floating-ui
Version:
Add Floating UI functionality to Alpine 3.x components.
25 lines • 11.6 kB
HTML
<html lang="en"> <head><meta charset="UTF-8"><meta name="description" content="Astro description"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/demo/favicon.svg"><meta name="generator" content="Astro v4.4.15"><meta name="robots" content="noindex,nofollow"><title>Alpine.js Floating UI Plugin</title><script defer src="/demo/scripts/cdn.js"></script><script defer src="https://unpkg.com/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script><script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script><link rel="stylesheet" href="/demo/_astro/index.BWLO4LzQ.css" /></head> <body class="bg-gray-900 antialiased"> <header class="bg-gray-950 p-4" data-astro-cid-j7pv25f6> <div class="max-w-5xl mx-auto" data-astro-cid-j7pv25f6> <h1 class="text-white font-bold text-3xl" data-astro-cid-j7pv25f6>
Alpine.js Floating UI Examples
</h1> </div> </header> <main class="max-w-5xl mx-auto" data-astro-cid-j7pv25f6> <section class="py-8 lg:py-12" data-astro-cid-j7pv25f6> <h2 class="text-white text-2xl text-white mb-2" data-astro-cid-j7pv25f6>Directive (x-float)</h2> <div class="flex flex-col lg:flex-row items-center gap-4" data-astro-cid-j7pv25f6> <!-- Directive --> <div x-data class="relative" data-astro-cid-j7pv25f6> <button @click="$refs.panel.toggle" data-astro-cid-j7pv25f6 class="bg-gray-700 text-white py-3 px-4 rounded-md hover:bg-lime-600"> Directive </button> <div x-ref="panel" x-float.flip.offset.size="{size: {padding: 16}}" data-astro-cid-j7pv25f6 style="display: none;" class="z-10 bg-gray-800 text-white p-2 rounded-md overflow-auto"> <ul data-astro-cid-j7pv25f6> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> </ul> </div> </div> <!-- Directive with settings --> <div x-data class="relative" data-astro-cid-j7pv25f6> <button @click="$refs.panel.toggle" data-astro-cid-j7pv25f6 class="bg-gray-700 text-white py-3 px-4 rounded-md hover:bg-lime-600"> Directive with settings </button> <div x-ref="panel" x-float.flip.offset.trap.arrow="{
offset: 30,
arrow: {
element: $refs.arrow
}
}" data-astro-cid-j7pv25f6 style="display: none;" class="z-10 bg-gray-800 text-white p-2 rounded-md overflow-auto"> <ul data-astro-cid-j7pv25f6> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> </ul> <div x-ref="arrow" class="arrow" data-astro-cid-j7pv25f6></div> </div> </div> <!-- Directive with transitions --> <div x-data data-astro-cid-j7pv25f6> <button @click="$refs.panel.toggle" data-astro-cid-j7pv25f6 class="bg-gray-700 text-white py-3 px-4 rounded-md hover:bg-lime-600"> Directive with transitions </button> <div x-ref="panel" x-float.teleport.flip.offset="true" x-transition:enter="ease duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease duration-500" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" data-astro-cid-j7pv25f6 style="display: none;" class="z-10 bg-gray-800 text-white p-2 rounded-md overflow-auto"> <ul data-astro-cid-j7pv25f6> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> </ul> </div> </div> <!-- Directive with transitions and settings --> <div x-data class="relative" data-astro-cid-j7pv25f6> <button @click="$refs.panel.toggle" data-astro-cid-j7pv25f6 class="bg-gray-700 text-white py-3 px-4 rounded-md hover:bg-lime-600"> Directive with settings and transitions </button> <div x-ref="panel" x-float.flip.offset.trap.arrow="{
offset: 30,
arrow: {
element: $refs.arrow
}
}" x-transition:enter="ease duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease duration-500" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" data-astro-cid-j7pv25f6 style="display: none;" class="z-10 bg-gray-800 text-white p-2 rounded-md overflow-auto"> <ul data-astro-cid-j7pv25f6> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> </ul> <div x-ref="arrow" class="arrow" data-astro-cid-j7pv25f6></div> </div> </div> </div> </section> <section class="py-8 lg:py-12" data-astro-cid-j7pv25f6> <h2 class="text-white text-2xl text-white mb-2" data-astro-cid-j7pv25f6>Magic ($float)</h2> <div class="flex flex-col lg:flex-row items-center gap-4" data-astro-cid-j7pv25f6> <!-- Magic --> <div x-data data-astro-cid-j7pv25f6> <button @click="$float({offset: 10}, {trap: true})" data-astro-cid-j7pv25f6 class="bg-gray-700 text-white py-3 px-4 rounded-md hover:bg-lime-600">
Magic
</button> <div x-ref="panel" data-astro-cid-j7pv25f6 style="display: none;" class="z-10 bg-gray-800 text-white p-2 rounded-md overflow-auto"> <ul data-astro-cid-j7pv25f6> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 1</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 2</button></li> <li data-astro-cid-j7pv25f6><button data-astro-cid-j7pv25f6>Button 3</button></li> </ul> </div> </div> <!-- Magic with settings --> <div x-data data-astro-cid-j7pv25f6> <button x-on:click="$float({
offset: 10,
placement: 'top',
arrow: {
element: $refs.arrow
}
})" data-astro-cid-j7pv25f6 class="bg-gray-700 text-white py-3 px-4 rounded-md hover:bg-lime-600">
Magic with settings
</button> <div x-ref="panel" data-astro-cid-j7pv25f6 style="display: none;" class="z-10 bg-gray-800 text-white p-2 rounded-md overflow-auto">
I'm floating 2!
<div x-ref="arrow" class="arrow" data-astro-cid-j7pv25f6></div> </div> </div> </div> </section> </main> </body></html>