SimpleBlazorMultiselect 0.1.8

.NET 6.0 
dotnet add package SimpleBlazorMultiselect --version 0.1.8
NuGet\Install-Package SimpleBlazorMultiselect -Version 0.1.8
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="SimpleBlazorMultiselect" Version="0.1.8" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add SimpleBlazorMultiselect --version 0.1.8
#r "nuget: SimpleBlazorMultiselect, 0.1.8"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package. 
// Install SimpleBlazorMultiselect as a Cake Addin
#addin nuget:?package=SimpleBlazorMultiselect&version=0.1.8

// Install SimpleBlazorMultiselect as a Cake Tool
#tool nuget:?package=SimpleBlazorMultiselect&version=0.1.8

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

<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

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

image

Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
0.1.8 190 11/27/2023
0.1.7 108 11/26/2023