Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/avcat/custom-select
https://github.com/avcat/custom-select
custom-select select web-component
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/avcat/custom-select
- Owner: avcat
- Created: 2024-04-19T19:35:01.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-09-25T20:01:33.000Z (3 months ago)
- Last Synced: 2024-10-02T06:43:59.800Z (3 months ago)
- Topics: custom-select, select, web-component
- Language: JavaScript
- Homepage: https://avcat.github.io/custom-select/
- Size: 75.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# <custom-select>
# Add to project
## As ES6 module from local file ([download](https://github.com/avcat/custom-select/blob/main/custom-select.js))
```JS
import 'custom-select.js';
```
## As ES6 module from CDN
```JS
import 'https://cdn.jsdelivr.net/gh/avcat/custom-select/custom-select.min.js';
```
## As external file from CDN
```HTML
```
# Use
## HTML
Replace `` HTML elements with ``:
```HTML
...
...
...
...
...
...
```
Property
Definition
name
Is utilized by form.
placeholder
Defines initial text of the select. Will be used, if there is no HTML element option with property selected.
selected
Defines initial value of the CustomSelect.
## JS
### Use public methods
#### value (_getter_) => @returns {string}
Shows current selected value, `null` if no option is selected.
```JS
const customSelect = document.querySelector('custom-select');
console.log(customSelect.value); // '42'
```
#### value (_setter_) {number|string}
Set an option with that value as selected. Numbers are treated as strings.
```JS
const customSelect = document.querySelector('custom-select');
customSelect.value = 42;
console.log(customSelect.value); // '42'
```
#### opened (_getter_) => @returns {boolean}
Gets the `opened` state of the `CustomSelect` component.
```JS
const customSelect = document.querySelector('custom-select');
console.log(customSelect.opened); // false
```
#### opened (_setter_) {boolean}
Sets the `opened` state of the `CustomSelect` component.
```JS
const customSelect = document.querySelector('custom-select');
customSelect.opened = true;
console.log(customSelect.opened); // true
```
#### toggle
Toggle the `opened` state of the `CustomSelect` component.
```JS
const customSelect = document.querySelector('custom-select');
customSelect.toggle();
console.log(customSelect.opened); // true
customSelect.toggle();
console.log(customSelect.opened); // false
```
#### checkValidity
Checks if element is considered valid.
`CustomSelect` is invalid, if it has the `required` attribute, but does bot have a value.
```JS
const customSelect = document.querySelector('custom-select');
console.log(customSelect.checkValidity()); // false
```
### Subscribe to events
`CustomSelect` emits its own `change` event, but you can add more custom events.
```JS
const customSelect = document.querySelector('custom-select');
customSelect.addEventListener('change', e => console.log('changed'));
```
### Give custom name
The `define()` static property can be used to define a custom name for the HTML tag for this Web Component. It is useful for avoiding possible name conflicts.
The default value is `custom-select`.
```JS
CustomSelect.define(); // Can be used as
CustomSelect.define('another-select'); // Can be used as
```
## CSS
CSS can be customized: either inside the source file or through CSS variables.
To be able to **affect a Web Component with external stylesheet**, we use `::part(part-name)` [syntax](https://webcomponents.guide/learn/components/styling/#parts-styling-a-shadow-tree-from-the-outside).
Some CSS properties are still [**inherited**](https://webcomponents.guide/learn/components/styling/#inheritance) from the outside: `font-size`, `font-family`, `color`.
```HTML
#shadow-root (open) ⤵
JavaScript
- JavaScript
- Python
- Java
#(end shadow-root) ⤶
```
### Sizes
```CSS
--select-border-radius: 0;
--base-min-height: 2.5em;
--base-padding-inline: 0.5em;
--base-icon-width: 1em;
--base-border-width: 0.1em;
--base-font-size: 1em;
--options-padding-block: 0;
--options-font-size: 1em;
--options-max-display-items: 5;
--option-padding-block: 0.5em;
```
### Colors
```CSS
--base-border-color: black;
--base-border-color-hover: lightblue;
--base-background-color-hover: white;
--base-border-color-opened: lightblue;
--base-background-color-opened: white;
--base-color-opened: black;
--option-background-color-hover: lightblue;
```
### Other
```CSS
--transition-duration: 0.3s;
--transition-timing-function: ease;
--arrow-icon: url('data:image/svg+xml, <svg fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">