Simple Blazor multiselect component, Bootstrap compatible but not required!
Get Started
$ dotnet add package SimpleBlazorMultiselectReadme
Simple blazor multiselect
This package contains a simple blazor dropdown component that supports single and multiple selection.
Installation
-
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>
Usage
See the project SimpleBlazorMultiselectDemo for more examples of how to use the component,
or take a look at the properties page on the wiki.
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();
}
Basic dropdown
<SimpleMultiselect
Options="_items"
@bind-SelectedOptions="_selectedItems"/>
Dropdown with custom item template
<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>