A Blazor component for creating image dropdowns using TomSelect.
$ dotnet add package kwolo.blazor.ImageDropdownThis blazor component is based on the awesome (and awesomely named!) Tom Select JS library and is primarily intended to address the bizarre shortfall in the HTML spec that is dropdowns-with-images.
The project repo is hosted on gitlab
The nuget package is available as kwolo.blazor.ImageDropdown
To get going in a blazor app, add the "kwolo.blazor.ImageDropdown" nuget
package then update index.html to include the two javascript files:
/* Insert these two lines */
<script src="_content/kwolo.blazor.ImageDropdown/js/tomSelect.js"></script>
<script src="_content/kwolo.blazor.ImageDropdown/js/tomSelectHandler.js"></script>
/* Your existing webassembly call */
<script src="_framework/blazor.webassembly.js"></script>
In your App.razor file, add a reference to ImageDropdownResources:
/* Add these two lines */
@using kwolo.blazor.ImageDropdown
<ImageDropdownResources />
/* The rest of your app.razor */
<Router AppAssembly="@typeof(App).Assembly">
<Found...
To use the control, check out the demo project's Home.razor
You will construct a list of ImageDropdownItems, each of which consist of a
Value (same as a <select> option value), a Name (the textual display for
the option) and an optional ImageUrl. The Value properties can be of any type.
If ImageUrl is supplied that that is used to display the image within the
dropdown.
To display the dropdown, include an ImageDropdown component in your blazor / razor
file:
<div class="select-wrapper">
<ImageDropdown Items="_items" @bind-Value="_selectedValue"></ImageDropdown>
</div>
And that's pretty much it. The only potential gotcha is that the dropdown will
inherit the width of its parent container, hence the class="select-wrapper"
specifier above. That allows us to set something like the following
in the attendant CSS file:
.select-wrapper {
width: 12rem;
}