Alpine Floating UI

Add Floating UI functionality to Alpine 3.x components.

> This package only supports Alpine ^3.x.

About

This plugin adds a $float magic and an x-float directive to Alpine, with modifiers for Floating UI functionality.

Installation

$3

Include the following



`

$3

`bash
npm install @awcodes/alpine-floating-ui
`

This plugin has the option to use x-trap, but you must also include the Alpine Focus plugin as well to make use of it.

`js
import Alpine from "alpinejs";
import Focus from "@alpinejs/focus"; // optional unless you want to use x-trap
import AlpineFloatingUI from "@awcodes/alpine-floating-ui";

Alpine.plugin(Focus); // optional unless you want to use x-trap
Alpine.plugin(AlpineFloatingUI);

window.Alpine = Alpine;
window.Alpine.start();
`

CSS

See the Floating UI Tutorial for infomation about styling.

Usage

$3

`html


To create a floating UI component with x-float, add the directive to your floating element with an x-ref to name the name. You can then trigger the panel with a click event using $refs to target the panel.

Available methods on the trigger are toggle, open, and close.

To use the middleware with x-float simply chain on the middleware you need to use.

`html


The first argument of $float should be an object.

This object currently accepts the 'position', 'flip', 'offset', 'shift', 'arrow', and 'hide' middleware for Floating UI. See the Floating UI Tutorial for infomation about these options.

Default options are:

`js
{
placement: 'bottom',
middleware: [autoPlacement()],
}
`

$3

To use the default options for each middleware pass an empty object as the value.

`html

`

$3

All settings should be configured within the expression of the x-float directive with the exception of placement which should be used directly on the directive itself. See https://floating-ui.com/docs/computePosition#placement placement options.

`html
x-ref="panel"
class="panel"
x-float.placement.top.flip.offset.hide="{
offset: 30,
hide: {
strategy: 'referenceHidden'
}
}"
>
`

Arrow Middleware

To use the arrow middleware you must provide an element to use as the arrow, placed inside your panel in the HTML and passed into the arrow middleware as a $ref to the element.

$3

`html


`html