Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/muhammadmabrouk/webrouk-custom-select
Webrouk Custom Select is a lightweight native JavaScript web component for custom select element.
https://github.com/muhammadmabrouk/webrouk-custom-select
Last synced: about 2 months ago
JSON representation
Webrouk Custom Select is a lightweight native JavaScript web component for custom select element.
- Host: GitHub
- URL: https://github.com/muhammadmabrouk/webrouk-custom-select
- Owner: MuhammadMabrouk
- License: mit
- Created: 2022-02-05T14:32:21.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-12-31T19:56:32.000Z (about 1 year ago)
- Last Synced: 2024-11-13T14:22:03.685Z (about 2 months ago)
- Language: JavaScript
- Size: 30.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# webroukCustomSelect
Webrouk Custom Select is a lightweight native JavaScript web component for custom select element.
- No dependencies.
- Lightweight.
- Fast search/filtering.
- Icon prefixes on select options.
- Keyboard navigation (Tab/Shift-Tab).
- Right-to-left support.
### Demo
---
[CodePen Example](https://codepen.io/muhammad_mabrouk/full/qBVqEmN/)
### Installation
---
Use [NPM](https://www.npmjs.com/package/webrouk-custom-select/) to download and install it directly in to your project
```sh
$ npm install webrouk-custom-select --save
```
or include js file manually
```html
```
### Usage
---
Using webroukCustomSelect is simple.
```html
Select an option
Option item 01
Option item 02
Option item 03
Option item 04
Option item 05
Option item 06
Option item 07
Option item 08
```
### Options
| Option | Type | Description | Default |
| ----------- | :----: | ----------- | :----: |
| search-placeholder | `string` | The value of the search input's placeholder | `Search...` |
| no-results | `string` | The text that is shown when a user's search has returned no results | `No results found...` |
| data-icon-url | `string` | The url value of the select option icon (applied to the option elements) | `null` |
### Style Customization
---
Expected CSS Variables from inside the component (optional).
```css
webrouk-custom-select {
--w-primary-color: hsl(218, 95%, 54%);
--w-bg-one: hsl(225, 6%, 13%);
--w-bg-two: hsl(225, 6%, 18%);
--w-inputs-bg: hsl(225, 6%, 15%);
--w-inputs-disabled-bg: hsl(225, 6%, 17%);
--w-text-color: hsl(225, 6%, 63%);
--w-border-color: hsl(225, 6%, 21%);
--w-success-color: hsl(135, 60%, 40%);
--w-danger-color: hsl(355, 70%, 55%);
--w-height-size: 48px;
--w-radius-size: 0.63rem;
}
```
### Styleable Component Parts
---
- root
- select-styled
- icon
- search
- options-list
- no-results
- option-item
#### Example:
```css
webrouk-custom-select::part(root) { /* some styles ... */ }
webrouk-custom-select::part(select-styled) { /* some styles ... */ }
webrouk-custom-select::part(icon) { /* some styles ... */ }
webrouk-custom-select::part(search) { /* some styles ... */ }
webrouk-custom-select::part(options-list) { /* some styles ... */ }
webrouk-custom-select::part(no-results) { /* some styles ... */ }
webrouk-custom-select::part(option-item) { /* some styles ... */ }
```
### License
-------
webroukCustomSelect is licensed [MIT](https://choosealicense.com/licenses/mit/).
It can be used for free and without any attribution, in any personal or commercial project.