Skip to content

Latest commit

 

History

History
63 lines (56 loc) · 2.21 KB

README.md

File metadata and controls

63 lines (56 loc) · 2.21 KB
Raw

Simple blazor multiselect

This package contains a simple blazor dropdown component that supports single and multiple selection.

Installation

  1. Add the following to your _Imports.razor file:

    @using SimpleBlazorMultiselect

  2. Add the following to the <head> of your App.razor or index.html file:

    <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. 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();
}

Basic dropdown

<SimpleMultiselect
    Options="_items"
    @bind-SelectedOptions="_selectedItems"/>

image

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>

image

Dropdown with filter

<SimpleMultiselect
        Options="_items"
        @bind-SelectedOptions="_selectedItems"
        CanFilter="true"/>

image