@logo-elements/select

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>

Installation

Install the component:

npm i @logo-elements/select -s

Once installed, import the component in your application:

import '@logo-elements/select';

For more detailed information, please visit:

Logo Elements Documentation ↗