Flexilla Alpine

Alpine.js plugins powered by Flexilla library

Overview

Flexilla Alpine is a collection of Alpine.js plugins that wrap the core Flexilla library components. These plugins provide the same powerful functionality as the original Flexilla components, but through Alpine.js directives for seamless integration with your Alpine.js applications.

Available Plugins

@flexilla/alpine-collapse - Create collapsible components
@flexilla/alpine-dropdown - Add dropdown functionality
@flexilla/alpine-autoresize-area - Auto-resize textarea elements
@flexilla/alpine-dismissible - Add dismissible functionality to elements
@flexilla/alpine-accordion - Create expandable accordion components
@flexilla/alpine-navbar - Build responsive navigation bars
@flexilla/alpine-offcanvas - Create off-canvas sidebars and panels
@flexilla/alpine-popover - Add popover tooltips and content
@flexilla/alpine-tabs - Create tabbed interfaces
@flexilla/alpine-to-top - Add scroll-to-top functionality

Installation

Each plugin is published as a separate NPM package. Install the specific plugin you need:

# For collapse functionality
npm install @flexilla/alpine-collapse

# For dropdown functionality
npm install @flexilla/alpine-dropdown

Basic Usage

To use any Flexilla Alpine plugin:

Import and register the plugin before initializing Alpine.js
Use the provided directive in your HTML

Example using the collapse plugin:

import Alpine from 'alpinejs'
import CollapsePlugin from '@flexilla/alpine-collapse'

// Register the plugin
Alpine.plugin(CollapsePlugin)

Alpine.start()

<!-- Use in your HTML -->
<div x-data>
    <button data-collapse-trigger data-target="collapse1">Toggle</button>

    <div x-f-collapse id="collapse1">
        <p>This content can be collapsed/expanded</p>
    </div>
</div>

Documentation

For detailed documentation and examples, visit each plugin's README:

License

MIT

Package detail

@flexilla/alpine-modal

readme