SpectoLogic.Blazor.Controls 1.0.0-alpha

Spectologic.Blazor.Controls

SPDropDown Control

_imports.razor

Add this line:

@using SpectoLogic.Blazor.Controls

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using SpectoLogic.Blazor.Controls

Usage Example:

MenuItem.cs

public class MenuItem
{
    public string Title { get; set; }
}

Pages/Index.razor

@page "/"

@if (IsInitialized)
{
    <SPDropDown TItem="MenuItem" Data="@Items" OnSelected="OnSelected" CSSSelectedItem="background-color:orange">
        <ItemTemplate>
            <a href="#" title="@context.Item1.Title">
                <img src="http://lorempixel.com/20/20/abstract/" />
                @context.Item1.Title
            </a>
        </ItemTemplate>
    </SPDropDown>

    <p>@selected?.Title</p>
}

@code
{
    public bool IsInitialized = false;
    public List<MenuItem> Items { get; set; } = new List<MenuItem>()
    {
        new MenuItem() { Title="A" },
        new MenuItem() { Title="B" },
        new MenuItem() { Title="C" },
        new MenuItem() { Title="D" }
    };

    private MenuItem selected = null;

    public async Task OnSelected(MenuItem selectedItem)
    {
        selected = selectedItem;
    }

    protected override void OnInitialized()
    {
        IsInitialized = true;
        StateHasChanged();
        base.OnInitialized();
    }
}