This package contains a simple blazor dropdown component that supports single and multiple selection.
-
Add the following to your
_Imports.razorfile:@using SimpleBlazorMultiselect
-
Add the following to the
<head>of yourApp.razororindex.htmlfile:<link rel="stylesheet" href="_content/SimpleBlazorMultiselect/bootstrap.min.css"/> <script src="_content/SimpleBlazorMultiselect/bootstrap.bundle.min.js"></script>
See the project SimpleBlazorMultiselectDemo for more examples of how to use the component,
or take a look at the properties page on the wiki.
The demo project is hosted on GitHub Pages.
Below are some short examples, they all use the following @code block:
@code {
private readonly List<string> _items = new() { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10" };
private List<string> _selectedItems = new();
}<SimpleMultiselect
Options="_items"
@bind-SelectedOptions="_selectedItems"/>
<SimpleMultiselect
Options="_items"
@bind-SelectedOptions="_selectedItems">
<SelectedOptionsRenderer Context="options">
@foreach (var item in options)
{
<span
class="badge bg-primary"
style="padding: 6px; margin-right: 10px;">
@item
</span>
}
</SelectedOptionsRenderer>
</SimpleMultiselect>
<SimpleMultiselect
Options="_items"
@bind-SelectedOptions="_selectedItems"
CanFilter="true"/>