Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

icon slot for each item #250

Open
jachin opened this issue Sep 26, 2023 · 0 comments
Open

icon slot for each item #250

jachin opened this issue Sep 26, 2023 · 0 comments
Labels
enhancement New feature or request

Comments

@jachin
Copy link

jachin commented Sep 26, 2023

Support an icon for each option in the dropdown.

It should also show up when an item is selected.

It would be nice to use a slot here, but that's not going to work since we need these icons to show up at least 2 places (in the dropdown and in the selected value element).

We're probably going to need to do node cloning here.

The markup would look something like...

<select slot="select-input">
  <option data-description="scarlet, vermilion, ruby, ruby red, ruby-colored, cherry" selected="">
    <span class="icon">....</span>
    Red
  </option>
  <option data-description="yellowish, yellowy, lemon, lemony, amber, gold, golden; blond, light brown, fair, flaxen">
    <span class="icon">....</span>
    Yellow
  </option>
  <option data-description=" sky blue, azure, cobalt (blue), sapphire, cerulean, navy (blue), saxe (blue), Oxford blue, Cambridge blue, ultramarine">
    <span class="icon">....</span>
    Blue
  </option>
  <option data-description="A town in France">
    Orange
  </option>
  <option data-description="greenish, viridescent; olive green, pea green, emerald green, lime green, bottle green">
    Green
  </option>
  <option data-description="violet">
    Purple
  </option>
</select>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant