This a styleable select Web Component built using Stencil.
Populating the options
<avn-select id="sample"></avn-select>
<script>
const avnSelect = document.querySelector('#sample');
avnSelect.options = [
{
"label": "Orange",
"value": "OR"
},
{
"label": "Apple",
"value": "APP"
}
];
</script>
OR you can initialize it declaratively
<avn-select id="sample">
<avn-option value="OR">Orange</avn-option>
<avn-option value="APP">Apple</avn-option>
</avn-select>
NOTE: this is only for initialization, for updating you need to modify the
.options
attribute in an immutable way eg:
const avnSelect = document.querySelector('#sample');
avnSelect.options = [...avnSelect.options, {label: 'Strawberry', value: 'STR'}];
Listening for change
event
const avnSelect = document.querySelector('#sample');
avnSelect.addEventListener('change', (option) => {
// returns { label , value }
// do something with returned value
})
Getting the selected value
const avnSelect = document.querySelector('#sample');
const selectedValue = avnSelect.value;
// returns { label, value }
These are the available CSS variables and their default values:
:host {
--arrow-color: #000;
--arrow-bg-color: #fff;
--border-color: #ccc;
--selected-color: #0A3874;
--hover-color: #1668d3;
--hover-text-color: #fff;
--height: 34px;
--border-radius: 5px;
--content-width: 100%;
--content-border-radius: 0;
--focused-border-color: rgba(8,57,114,0.5);
--focused-border-shadow: inset 0 1px 1px;
}