0.1.3 • Published 1 year ago
alpinjs-dropdown v0.1.3
alpinjs-dropdown
Dropdown component for Alpine.js
Authors
License
Badges
Demo
Demo link : Click here
Git Repo
Github : Click here
Installation
Install alpinjs-dropdown with npm
npm install alpinejs alpinjs-dropdown
or
yarn add alpinejs alpinjs-dropdown
Usage/Examples
import :
import Alpine from 'alpinejs';
import dropdown from "alpinjs-dropdown";
Alpine.plugin(dropdown);
Alpine.start();
USAGE
// html
<input type="text" x-init="dropdown($el)" placeholder="Choose a User" />
or
<select x-init="dropdown($el)" placeholder="Select a User"></select>
// js
const dropdown = this.$dropdown(el, {
limitPerScroll: 5,
filterPlaceholder: "Search...",
placeholder: "Select...",
defaultItem: (event) => {
return {
text: "Create New : " + event?.filterText,
onSelect: (event) => {
console.log(event);
},
};
}
});
// on item selected
dropdown.onSelected((event) => {
console.log(event);
});
//set selected item
dropdown.setSelectItem(
{
text: 'item text'',
value: 'item value',
image: 'item image url', // optional
}, true // set to true for not trigger onSelected event);
// on type in filter input
dropdown.onFilter((event) => {
console.log(event.value);
});
// set data to dropdown listing
dropdown.setData(
[
{
text: 'item text'',
value: 'item value',
image: 'item image url', // optional
},
{
text: 'item text'',
value: 'item value',
image: 'item image url', // optional
}
]
);
// destroy
el.destroy();
0.1.3
1 year ago
0.1.2
1 year ago
0.1.1
1 year ago
0.1.0
1 year ago
0.0.9
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago
0.0.1-beta.11
1 year ago
0.0.1-beta.10
1 year ago
0.0.1-beta.9
1 year ago
0.0.1-beta.8
1 year ago
0.0.1-beta.7
1 year ago
0.0.1-beta.6
1 year ago
0.0.1-beta.5
1 year ago
0.0.1-beta.4
1 year ago
0.0.1-beta.3
1 year ago
0.0.1-beta.2
1 year ago
0.0.1-beta.1
1 year ago
0.0.1
1 year ago