LemonadeJS dropdown integration.
npm install @lemonadejs/dropdownCompatible with Vanilla JavaScript, LemonadeJS, React, VueJS or Angular.
The LemonadeJS Dropdown is a versatile solution for efficient option management. It is a framework-agnostic JavaScript plugin designed for seamless integration with Vue, React, and Angular. This feature-rich dropdown incorporates autocomplete for swift selections, grouping for organized options, and lazy loading for optimized performance, contributing to a smooth and improved user experience.
- Lightweight: The JavaScript Dropdown is only about 2 KBytes;
- Integration: It can be used as a standalone library or integrated with any modern framework;
You can install using NPM or using directly from a CDN.
To install it in your project using npm, run the following command:
``bash`
$ npm install @lemonadejs/dropdown
To use Dropdown via a CDN, include the following script tags in your HTML file:
`html`
Quick example with Lemonade
`javascript
import Dropdown from '@lemonadejs/dropdown';
import '@lemonadejs/dropdown/dist/style.css';
import '@lemonadejs/modal/dist/style.css';
export default function App() {
const self = this;
self.data = [
{ text: 'Red', value: 1 },
{ text: 'Blue', value: 2 },
{ text: 'Green', value: 3 },
{ text: 'Yellow', value: 4 },
{ text: 'Purple', value: 5 },
{ text: 'Gray', value: 6 },
];
return
;
}
`Quick example with React
jsx
import React, { useRef } from 'react';
import Dropdown from '@lemonadejs/dropdown/dist/react';
import '@lemonadejs/dropdown/dist/style.css';
import '@lemonadejs/modal/dist/style.css';const data = [
{ text: 'Red', value: 1 },
{ text: 'Blue', value: 2 },
{ text: 'Green', value: 3 },
{ text: 'Yellow', value: 4 },
{ text: 'Purple', value: 5 },
{ text: 'Gray', value: 6 },
];
export default function App() {
const dropdown = useRef();
return (
);
}
`Quick example with Vue
vue
`$3
| Attribute | Description |
| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| data: Item[] | An array of options to be displayed. Each item should follow the structure defined in the 'Item Details' section. |
| multiple?: boolean | If provided, enables the multiple selection mode, allowing users to select more than one option simultaneously. |
| autocomplete?: boolean | If provided, enables the autocomplete feature, displaying an input field that allows users to filter and quickly find options in the Dropdown. |
| value?: string | Represents the current value or selected option in the Dropdown. |
| type?: string | Specifies the type of display the Dropdown will use. It can be "searchbar" for a search bar interface, "picker" for a selection picker, or "default" for the default dropdown appearance. |
| insert?: boolean | Enables the
feature, allowing users to add a new option directly by typing the title text and clicking on the plus symbol. |
| format?: number | Data format type, usually in the form of { id: name } or { value: text } |
| width?: number | Specifies the width of the dropdown. |
| placeholder?: string | Placeholder text to guide users in the dropdown. |
| url?: string | Specifies the URL for fetching the data. Do not declare the data` attribute for the url to function properly. || Attribute | Description |
| ------------------------ | ------------------------------------------------------------------------------------------- |
| value?: number or string | Represents the identifier or unique value associated with the option. |
| group?: string | Indicates the group to which the option belongs, allowing for segregation and organization. |
| text?: string | Displays the label or text associated with the option. |
| image?: string | Specifies the image URL to be displayed alongside the option. |
| synonyms?: string[] | Keywords for easier item identification |
| disabled?: boolean | Indicates whether the item is currently disabled |
| color?: string | Specifies the color associated with the item |
| Event | Trigger |
| ----------------------------------------- | -------------------------------------------------------------------------- |
| onclose?: () => void | Invoked when the dropdown modal is closed. |
| onbeforeinsert?: (instance, Item) => void | Invoked before an item is added to the options through the insert feature. |
| oninsert?: (instance, Item) => void | Invoked after an item is added to the options through the insert feature. |
| onchange?: (instance, Item) => void | Invoked when the value changes. |
| onload?: (instance, Item) => void | Invoked when appended to the DOM. |
| onsearch?: (instance, Item) => void | Invoked when searching for an item. |
| |
| onbeforesearch?: (instance, Item) => void | Invoked before initiating a search. |
| |
| onopen?: (instance) => void | Invoked when the dropdown is opened. |
The LemonadeJS LemonadeJS Dropdown is released under the MIT.