Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yurayarosh/select-custom
JS plugin for making custom wrap around HTML select element
https://github.com/yurayarosh/select-custom
Last synced: 8 days ago
JSON representation
JS plugin for making custom wrap around HTML select element
- Host: GitHub
- URL: https://github.com/yurayarosh/select-custom
- Owner: yurayarosh
- Created: 2018-11-16T14:38:46.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-04-29T21:16:50.000Z (over 1 year ago)
- Last Synced: 2024-11-27T19:18:47.596Z (26 days ago)
- Language: JavaScript
- Homepage:
- Size: 794 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# select-custom
### Example
* [Codesandbox](https://codesandbox.io/s/krcji)
### Install
```html
npm i select-custom
```
```html
Option 1
Option 2
Option 3
```
```js
import Select from 'select-custom';
const selects = [...document.querySelectorAll('.js-select')];
selects.forEach((el) => {
const select = new Select(el, {
// some options
});
select.init();
});
```
### Options
Standart options
```js
{
optionBuilder: undefined,
panelItem: { position: '', item: '', className: '' },
changeOpenerText: true,
multipleSelectionOnSingleClick: true,
multipleSelectOpenerText: { labels: false, array: false },
allowPanelClick: false,
openOnHover: false,
closeOnMouseleave: false,
wrapDataAttributes: false,
openerLabel: false,
}
```
`optionBuilder` - `function` arguments `option, customOption` allows add elements to custom option.
`panelItem` - `object` options: `{ item: element or string, position: 'top', className: '' }`, `{ item: element or string, position: 'bottom', className: '' }`- add element in custom panel above or under options.
`changeOpenerText` - `boolean` if `false` - text in opener panel won't change.
If native select has attribute `multiple` - select allows multiple selection.
`multipleSelectionOnSingleClick` - `boolean` if `true` - allows multiple selection witout CTRL button.
`multipleSelectOpenerText` - if `{ array: true }` - in opener pannel will be added array with selected options text, if `{ labels: true }` - in opener pannel will be added span elements with button and option text.
`allowPanelClick` - `boolean` if `true` - option panel won't close on selection.
`openOnHover` - `boolean` if `true` - allows open on hover.
`closeOnMouseleave` - `boolean` if `true` - allows close on mouseleave.
`wrapDataAttributes` - `boolean` if `true` - data attributes from native `select` element will be added to custom wrap.
`openerLabel` - `boolean` add span inner to custom opener.
Supports standart attributs `multiple`, `disabled`, `disabled` for `option`.
### Events
Native select
```js
const select = new Select(el, { options });
select.init();
el.addEventListener('change', (e) => {
// some function
});
```
### Methods
On open and on close custom select
```js
const select = new Select(el, { options });
select.onOpen = (select) => {
// some function
};
select.onClose = (select) => {
// some function
};
select.init();
```
Destroy method (for proper using watch example on [Codesandbox](https://codesandbox.io/s/krcji))
```js
select.destroy();
```