SpectoLogic.Blazor.Controls 1.0.2-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 "/"

<style>
    .spdropdown-selected{
        background-color : yellow
    }
</style>

@if (IsInitialized)
{
    <EditForm Model="model" OnSubmit="OnSubmit">
        <SPDropDown 
                    TItem="MenuItem" 
                    Enabled="@isEnabled" 
                    Data="@Items" 
                    @bind-Value="selected"
                    OnSelected="OnSelected"
                    CSSSelectedItem="spdropdown-selected">
            <ItemTemplate Context="dropDownContext">
                <img src="http://lorempixel.com/20/20/abstract/" />
                <label>@dropDownContext.Item1.Title</label>
            </ItemTemplate>
        </SPDropDown>
        <p>@selected?.Title</p>
        <InputCheckbox @bind-Value="isEnabled">Enable</InputCheckbox>
    </EditForm>
    <p>@statusLine</p>
}

@code
{
    public string model = string.Empty;
    private bool isEnabled = false;

    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;
    private string statusLine = string.Empty;

    public async Task OnSelected(MenuItem selectedItem)
    {
    }

    protected override void OnInitialized()
    {
        IsInitialized = true;
        selected = Items[2];
        StateHasChanged();
        base.OnInitialized();
    }

    public async Task OnSubmit()
    {
        statusLine = "Submitted!";
    }
}