A web component for selecting a single value from a list of options presented in an overlay.
<logo-elements-select label="Sort by"></logo-elements-select>
<script>
document.querySelector('logo-elements-select').renderer = (root) => {
if (root.firstElementChild) {
return;
}
// Note that innerHTML is only used for demo purposes here!
// Consider using Lit or another template library instead.
root.innerHTML = `
<logo-elements-list-box>
<logo-elements-item value="recent">Most recent first</logo-elements-item>
<logo-elements-item value="rating-desc">Rating: high to low</logo-elements-item>
<logo-elements-item value="rating-asc">Rating: low to high</logo-elements-item>
<logo-elements-item value="price-desc">Price: high to low</logo-elements-item>
<logo-elements-item value="price-asc">Price: low to high</logo-elements-item>
</logo-elements-list-box>
`;
};
</script>
Install the component:
npm i @logo-elements/select -s
Once installed, import the component in your application:
import '@logo-elements/select';