@flexilla/alpine-dropdown 0.0.2 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -9
- package/dist/cdn.js +261 -188
- package/dist/cdn.min.js +1 -1
- package/dist/module.cjs.js +261 -188
- package/dist/module.esm.js +261 -188
- package/package.json +5 -3
- package/src/index.d.ts +7 -0
package/README.md
CHANGED
|
@@ -1,9 +1,21 @@
|
|
|
1
|
-
<h1 align="center">Alpine
|
|
1
|
+
<h1 align="center">Alpine Dropdown</h1>
|
|
2
2
|
|
|
3
3
|
<p align="center">
|
|
4
|
-
Simple
|
|
4
|
+
Simple Interactive Dropdown Component for <a href="https://alpinejs.dev">Alpine.js</a>
|
|
5
5
|
</p>
|
|
6
6
|
|
|
7
|
+
<p align="center">
|
|
8
|
+
Part of the <a href="https://flexilla-docs.vercel.app">Flexilla</a> library - A collection of UI components for Alpine.js
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
## Overview
|
|
12
|
+
|
|
13
|
+
The Alpine Dropdown component provides a lightweight and flexible dropdown menu implementation for Alpine.js applications. It features:
|
|
14
|
+
|
|
15
|
+
- 🎯 Precise positioning
|
|
16
|
+
- 🎨 Customizable styling with Tailwind CSS support
|
|
17
|
+
- ⌨️ Keyboard navigation support
|
|
18
|
+
- 🔄 Smooth transitions and animations
|
|
7
19
|
|
|
8
20
|
## Installation
|
|
9
21
|
|
|
@@ -12,32 +24,48 @@
|
|
|
12
24
|
Include the following `<script>` tag in the `<head>` of your document, just before Alpine.
|
|
13
25
|
|
|
14
26
|
```html
|
|
15
|
-
|
|
27
|
+
<script src="https://cdn.jsdelivr.net/npm/@flexilla/alpine-dropdown@latest/dist/cdn.min.js" defer></script>
|
|
16
28
|
```
|
|
17
29
|
|
|
18
30
|
### NPM
|
|
19
31
|
|
|
20
32
|
```shell
|
|
21
|
-
npm install @flexilla/alpine-
|
|
33
|
+
npm install @flexilla/alpine-dropdown
|
|
22
34
|
```
|
|
23
35
|
|
|
24
|
-
Add the `x-
|
|
36
|
+
Add the `x-dropdown` directive to your project by importing the package **before** starting Alpine.
|
|
25
37
|
|
|
26
38
|
```js
|
|
27
39
|
import Alpine from 'alpinejs';
|
|
28
|
-
import
|
|
40
|
+
import PluginDropdown from '@flexilla/alpine-dropdown';
|
|
29
41
|
|
|
30
|
-
Alpine.plugin(
|
|
42
|
+
Alpine.plugin(PluginDropdown);
|
|
31
43
|
|
|
32
44
|
Alpine.start();
|
|
33
45
|
```
|
|
34
46
|
|
|
35
|
-
##
|
|
47
|
+
## Basic Usage
|
|
36
48
|
|
|
37
49
|
```html
|
|
38
|
-
|
|
50
|
+
<button data-dropdown-trigger data-dropdown-id="dropdown-1"
|
|
51
|
+
class="border border-zinc-800 hover:bg-zinc-950 bg-zinc-900 text-white px-4 py-2 rounded-lg text-sm">
|
|
52
|
+
Open Dropdown
|
|
53
|
+
</button>
|
|
54
|
+
<div x-dropdown x-data role="list" id="dropdown-1" data-fx-popper
|
|
55
|
+
class="fixed top-[--fx-popper-placement-y] left-[--fx-popper-placement-x] z-20 w-56 border border-zinc-800 bg-zinc-900/80 text-zinc-50 backdrop-filter backdrop-blur-xl rounded-lg flex flex-col overflow-hidden opacity-0 invisible fx-open:opacity-100 fx-open:visible ease-linear transition-transform translate-y-4 fx-open:translate-y-0">
|
|
56
|
+
<a href="#" class="focus:outline focus:bg-zinc-900/90 outline-none focus:outline-blue-500 ease-linear flex hover-bg-zinc-800/80 p-2 rounded-md">
|
|
57
|
+
Item 1
|
|
58
|
+
</a>
|
|
59
|
+
<a href="/" class="focus:outline focus:bg-zinc-900/90 outline-none focus:outline-blue-500 ease-linear flex hover-bg-zinc-800/80 p-2 rounded-md">Item 2</a>
|
|
60
|
+
<a href="#" class="focus:outline focus:bg-zinc-900/90 outline-none focus:outline-blue-500 ease-linear flex hover-bg-zinc-800/80 p-2 rounded-md">Item 3</a>
|
|
61
|
+
<a href="#" class="focus:outline focus:bg-zinc-900/90 outline-none focus:outline-blue-500 ease-linear flex hover-bg-zinc-800/80 p-2 rounded-md">Item 4</a>
|
|
62
|
+
</div>
|
|
39
63
|
```
|
|
40
64
|
|
|
65
|
+
## Documentation
|
|
66
|
+
|
|
67
|
+
For detailed documentation, customization options, and advanced usage examples, visit the [Flexilla Dropdown documentation](https://flexilla-docs.vercel.app/docs/components/dropdown).
|
|
68
|
+
|
|
41
69
|
## License
|
|
42
70
|
|
|
43
71
|
Copyright (c) 2025 Johnkat MJ and contributors.
|