https://github.com/polydile/dile-select
Web Component to implement a dropdown menú, like a select HTML element.
https://github.com/polydile/dile-select
Last synced: about 2 months ago
JSON representation
Web Component to implement a dropdown menú, like a select HTML element.
- Host: GitHub
- URL: https://github.com/polydile/dile-select
- Owner: Polydile
- License: mit
- Created: 2019-08-02T17:41:47.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T06:11:16.000Z (over 3 years ago)
- Last Synced: 2025-08-09T04:38:08.562Z (11 months ago)
- Language: JavaScript
- Size: 2.36 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# \ & \
Web components to implement a select dropdown menu. `````` implements a interface to select one single value. `````` implements a interface to select multiple values in a list.
## Installation
```bash
npm i dile-select
```
## \ Usage
```html
import 'dile-select/dile-select.js';
Kiwi fruit
Pear
Apple
Orange
True passion fruit
```
## \ Usage
```html
import 'dile-select/dile-select-multiple.js';
General Motors
Volkswagen
Toyota
Fiat
Renault
```
## Properties
### Properties specific for ``````
- **value** (String): Stores the value of the selected item. Also Useful for the component initialization.
- **uninitialized**: When the component initializes, it takes the first option value as default. If uninitialized property is set to true, then the element do not initialize with any value.
### Properties specific for ``````
- **value** (Array): Stores the values of the selected items (array of strings). Also Useful for the component initialization.
- **labelNumItem**: For configure the selected text message. Something like "fruits selected" will show a message "3 fruits selected" when the user has selected 3 diferent options.
- **uninitialized**: Even the component has this property, it is unuseful in multiple select components, because there is not a default initialization, only the one you can apply with the ```value``` array property.
### Common properties for both components
- **name**: Name for the component. So, you can know which element element is related when a changed event is received.
- **opened**: This defines the component open / close state. the default placeholder is 'Select'.
- **selectedText**: Stores the innerText of the current selected option.
- **label**: A label for the element.
- **placeholder**: Placeholder. Appears when there isn't a selected element.
- **errored**: Display select in a error state
## Methods
- **selectItem(value)**: this method is useful to select a item programaticaly. You should pass the string option value.
- **open()**: Opens the dropdown menu.
- **close()**: Closes the dropdown menu.
## events
- **dile-select-changed**: dispatched when the select element changes it's current value. This custom event gives some useful data in the detail property.
## Custom properties
CSS custom properties defined on ``````:
Custom property | Description | Default
----------------|-------------|---------
--dile-select-width | width of the select element | auto
--dile-select-text-color | Text color of the selected item | #303030
--dile-select-background-color | Background color of the selected item | #ddd
--dile-select-border-width| Border width of the interface. Only supports width in pixel units!! | 0
--dile-select-border-color | Border color of the interface | #888
--dile-select-border-radius | Border radius of the interface | 10px
--dile-select-hover-background-color | Background color when hover in a item | #eee
--dile-select-label-font-size| Label font size | 1em
--dile-select-label-color | Label text color | #59e
--dile-select-label-font-weight | Label font weight | normal
--dile-select-padding-x | Horizontal padding (left & right) of the items | 10px
--dile-select-padding-y | Vertical padding (top & bottom) of the items | 10px
--dile-select-errored-background-color | Error background color | #f66
--dile-select-errored-text-color | Error items text color | #fff
The component `````` has the same CSS custom properties than ``````, and also:
Custom property | Description | Default
----------------|-------------|---------
--dile-select-multiple-unchecked-color | Color for the checkbox in unselected state | #aaa
--dile-select-multiple-checked-color | Color for the checkbox in selected state | #26e