Bootstrap Blazor enterprise-level UI component library

Enterprise-level component library based on Bootstrap and Blazor

Example Razor C#Video

Dropdown

Collapse actions or menus into drop-down menus

Basic usage

Use TagName='a' to open a drop-down list with a button tag

Demo

@inject IStringLocalizer<DropdownNormal> Localizer

<Dropdown TValue="string" Items="Items" OnSelectedItemChanged="@ShowMessage" Color="Color.Secondary" />
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private BlockLogger? Trace { get; set; }

    private List<SelectedItem> Items { get; set; } = new List<SelectedItem> { };

    /// <summary>
    /// ShowMessage
    /// </summary>
    /// <param name="e"></param>
    /// <returns></returns>
    private Task ShowMessage(SelectedItem e)
    {
        Trace.Log($"Dropdown Item Clicked: Value={e.Value} Text={e.Text}");
        return Task.CompletedTask;
    }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = new List<SelectedItem>
        {
            new SelectedItem{ Text=Localizer["Item1"], Value="0"},
            new SelectedItem{ Text=Localizer["Item2"], Value="1"},
            new SelectedItem{ Text=Localizer["Item3"], Value="2"},
        };
    }
}

Dropdown empty drop-down menu

Allow empty Items drop-down menus

Demo

<Dropdown TValue="string" Items="EmptyList" Color="Color.Secondary" />

@code {
    private static List<SelectedItem> EmptyList => new();
}

Drop-down box with color

Provide warning message boxes in various colors. Quote Color='Color.Primary' and other color and style classes to define the appearance of the drop-down menu

Demo

@inject IStringLocalizer<DropdownColor> Localizer

<div class="row g-3">
    <div class="col-6 col-sm-4 col-md-3">
        <Dropdown TValue="string" Items="Items" Color="Color.Primary" />
    </div>
    <div class="col-6 col-sm-4 col-md-3">
        <Dropdown TValue="string" Items="Items" Color="Color.Info" />
    </div>
    <div class="col-6 col-sm-4 col-md-3">
        <Dropdown TValue="string" Items="Items" Color="Color.Warning" />
    </div>
    <div class="col-6 col-sm-4 col-md-3">
        <Dropdown TValue="string" Items="Items" Color="Color.Danger" />
    </div>
</div>

@code {
    private List<SelectedItem> Items { get; set; } = new List<SelectedItem> { };

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = new List<SelectedItem>
        {
            new SelectedItem{ Text=Localizer["Item1"], Value="0"},
            new SelectedItem{ Text=Localizer["Item2"], Value="1"},
            new SelectedItem{ Text=Localizer["Item3"], Value="2"},
        };
    }
}

Split button drop-down menu

You can create a split drop-down menu with tags similar to a single button drop-down menu, and add ShowSplit='true' (you need to add DropdownType='DropdownType.ButtonGroup') when you use a split component. Insert this symbol as a drop-down The options are handled at appropriate intervals (distance).

Demo

@inject IStringLocalizer<DropdownSplit> Localizer

<div class="row g-3">
    <div class="col-6 col-sm-4 col-md-3">
        <Dropdown TValue="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Primary" />
    </div>
    <div class="col-6 col-sm-4 col-md-3">
        <Dropdown TValue="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Info" />
    </div>
    <div class="col-6 col-sm-4 col-md-3">
        <Dropdown TValue="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Warning" />
    </div>
    <div class="col-6 col-sm-4 col-md-3">
        <Dropdown TValue="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Danger" />
    </div>
</div>

@code {
    private List<SelectedItem> Items { get; set; } = new List<SelectedItem> { };

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = new List<SelectedItem>
        {
            new SelectedItem{ Text=Localizer["Item1"], Value="0"},
            new SelectedItem{ Text=Localizer["Item2"], Value="1"},
            new SelectedItem{ Text=Localizer["Item3"], Value="2"},
        };
    }
}

Size definition

The drop-down menu has a variety of size specifications to choose from Size attributes, including preset and split button drop-down menus.

Demo

@inject IStringLocalizer<DropdownSize> Localizer

<div class="row g-3">
    <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
        <Dropdown TValue="string" Items="Items" Size="Size.ExtraSmall" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
        <Dropdown TValue="string" Items="Items" Size="Size.Small" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
        <Dropdown TValue="string" Items="Items" Size="Size.Medium" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
        <Dropdown TValue="string" Items="Items" Size="Size.Large" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
        <Dropdown TValue="string" Items="Items" Size="Size.ExtraLarge" />
    </div>
    <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
        <Dropdown TValue="string" Items="Items" Size="Size.ExtraExtraLarge" />
    </div>
</div>

@code {
    private List<SelectedItem> Items { get; set; } = new List<SelectedItem> { };

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = new List<SelectedItem>
        {
            new SelectedItem{ Text=Localizer["Item1"], Value="0"},
            new SelectedItem{ Text=Localizer["Item2"], Value="1"},
            new SelectedItem{ Text=Localizer["Item3"], Value="2"},
        };
    }
}

Expanding direction

Add the style of Direction='Direction.Dropup' to make the drop-down menu expand upward.

Demo

Start

End

Down

@inject IStringLocalizer<DropdownDirection> Localizer

<div class="row form-inline form-inline-end g-3">
    <div class="col-6 col-sm-4 col-md-3">
        <Dropdown TValue="string" Items="Items" Direction="Direction.Dropleft" ShowLabel="true" DisplayText="Start" />
    </div>
    <div class="col-6 col-sm-4 col-md-3">
        <Dropdown TValue="string" Items="Items" Direction="Direction.Dropright" ShowLabel="true" DisplayText="End" />
    </div>
    <div class="col-6 col-sm-4 col-md-3">
        <Dropdown TValue="string" Items="Items" Direction="Direction.Dropup" ShowLabel="true" DisplayText="Up" />
    </div>
    <div class="col-6 col-sm-4 col-md-3">
        <Dropdown TValue="string" Items="Items" Direction="Direction.Dropdown" ShowLabel="true" DisplayText="Down" />
    </div>
</div>

@code {
    private List<SelectedItem> Items { get; set; } = new List<SelectedItem> { };

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = new List<SelectedItem>
        {
            new SelectedItem{ Text=Localizer["Item1"], Value="0"},
            new SelectedItem{ Text=Localizer["Item2"], Value="1"},
            new SelectedItem{ Text=Localizer["Item3"], Value="2"},
        };
    }
}

Menu alignment

By default, the right side of the drop-down menu is aligned by setting MenuAlignment=Alignment.Right

Demo

Start

End

Center

@inject IStringLocalizer<DropdownAlignment> Localizer

<div class="row form-inline form-inline-end g-3">
    <div class="col-6 col-sm-4 col-md-3">
        <Dropdown TValue="string"
                  Items="Items"
                  Color="Color.Secondary"
                  MenuAlignment="Alignment.Left"
                  Direction="Direction.Dropdown"
                  ShowLabel="true" DisplayText="Start" />
    </div>
    <div class="col-6 col-sm-4 col-md-3">
        <Dropdown TValue="string"
                  Items="Items"
                  Color="Color.Secondary"
                  MenuAlignment="Alignment.Right"
                  Direction="Direction.Dropdown"
                  ShowLabel="true" DisplayText="End" />
    </div>
    <div class="col-6 col-sm-4 col-md-3">
        <Dropdown TValue="string"
                  Items="Items"
                  Color="Color.Secondary"
                  MenuAlignment="Alignment.Center"
                  Direction="Direction.Dropdown"
                  ShowLabel="true" DisplayText="Center" />
    </div>
    <div class="col-6 col-sm-4 col-md-3">
        <Dropdown TValue="string"
                  Items="Items"
                  Color="Color.Secondary"
                  MenuAlignment="Alignment.Center"
                  Direction="Direction.Dropup"
                  ShowLabel="true"
                  DisplayText="Center" />
    </div>
</div>

@code {
    private List<SelectedItem> Items { get; set; } = new List<SelectedItem> { };

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items = new List<SelectedItem>
        {
            new SelectedItem{ Text=Localizer["Item1"], Value="0"},
            new SelectedItem{ Text=Localizer["Item2"], Value="1"},
            new SelectedItem{ Text=Localizer["Item3"], Value="2"},
        };
    }
}

Bind data source

When you click the button on the right, the menu items in the drop-down box will increase

Demo

@inject IStringLocalizer<DropdownItems> Localizer

<div class="row">
    <div class="col-12 col-sm-6">
        <Dropdown TValue="string" Items="@Foos">
        </Dropdown>
    </div>
    <div class="col-12 col-sm-6">
        <Button @onclick="@AddItem">@Localizer["AddItem"]</Button>
        <Button @onclick="@RemoveItem" Color="Color.Danger">@Localizer["RemoveItem"]</Button>
    </div>
</div>

@code {
    private List<SelectedItem> Foos { get; set; } = new List<SelectedItem>();

    /// <summary>
    /// AddItem
    /// </summary>
    private void AddItem()
    {
        Foos.Add(new SelectedItem($"{Foos.Count}", $"{Localizer["City"]} {Foos.Count}"));
    }

    /// <summary>
    /// RemoveItem
    /// </summary>
    private void RemoveItem()
    {
        if (Foos.Any())
        {
            Foos.RemoveAt(0);
        }
    }

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Foos = new List<SelectedItem>
        {
            new SelectedItem{ Text=Localizer["Item1"], Value="0"},
            new SelectedItem{ Text=Localizer["Item2"], Value="1"},
            new SelectedItem{ Text=Localizer["Item3"], Value="2"},
        };
    }
}

Bind data source

When you change the options, the menu items in the drop-down box will increase

Demo

Melbourne

Sydney

@inject IStringLocalizer<DropdownRadio> Localizer

<div class="row g-3">
    <div class="col-12">
        <RadioList TValue="SelectedItem" Items="@RadioItems" OnSelectedChanged="@OnRadioItemChanged">
        </RadioList>
    </div>
    <div class="col-12">
        <Dropdown TValue="string" Items="@RadioDropDownItems">
        </Dropdown>
    </div>
</div>
@code {
    private List<SelectedItem> RadioItems { get; set; } = new List<SelectedItem>();

    private List<SelectedItem> RadioDropDownItems { get; set; } = new List<SelectedItem>();

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        RadioDropDownItems = new List<SelectedItem>
        {
            new SelectedItem("1", Localizer["Item1"]) { Active = true },
            new SelectedItem("2", Localizer["Item2"]),
            new SelectedItem("3", Localizer["Item3"])
        };

        RadioItems = new List<SelectedItem>
        {
            new SelectedItem("1", Localizer["Item1"]) { Active = true },
            new SelectedItem("2", Localizer["Item2"])
        };
    }

    /// <summary>
    /// OnRadioItemChanged
    /// </summary>
    /// <param name="values"></param>
    /// <param name="item"></param>
    /// <returns></returns>
    private Task OnRadioItemChanged(IEnumerable<SelectedItem> values, SelectedItem item)
    {
        RadioDropDownItems.Add(new SelectedItem($"{RadioDropDownItems.Count + 1}", $"{Localizer["City"]} {RadioDropDownItems.Count}"));
        StateHasChanged();
        return Task.CompletedTask;
    }
}

Cascade binding

By selecting different options in the first drop-down box, the second drop-down box is filled with content dynamically.

Demo

@inject IStringLocalizer<DropdownCascade> Localizer

<div class="row g-3">
    <div class="col-12 col-sm-6">
        <Dropdown TValue="string" Items="Items3" OnSelectedItemChanged="OnCascadeBindSelectClick" />
    </div>
    <div class="col-12 col-sm-6">
        <Dropdown TValue="string" Items="Items2" />
    </div>
</div>

@code {
    private IEnumerable<SelectedItem>? Items2 { get; set; }

    private IEnumerable<SelectedItem>? Items3 = new SelectedItem[] { };

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        Items3 = new SelectedItem[]
        {
            new SelectedItem ("", Localizer["Item1"]),
            new SelectedItem ("Beijing", Localizer["Item2"]) { Active = true },
            new SelectedItem ("Shanghai", Localizer["Item3"]),
            new SelectedItem ("Hangzhou", Localizer["Item4"])
        };
    }

    /// <summary>
    /// 级联绑定菜单
    /// </summary>
    /// <param name="item"></param>
    private async Task OnCascadeBindSelectClick(SelectedItem item)
    {
        // 模拟异步通讯切换线程
        await Task.Delay(10);
        if (item.Value == "Beijing")
        {
            Items2 = new SelectedItem[]
            {
                new SelectedItem("1",Localizer["Item5"]) { Active = true },
                new SelectedItem("2",Localizer["Item6"]),
            };
        }
        else if (item.Value == "Shanghai")
        {
            Items2 = new SelectedItem[]
            {
                new SelectedItem("1",Localizer["Item7"]),
                new SelectedItem("2",Localizer["Item8"]) { Active = true } ,
            };
        }
        else
        {
            Items2 = Enumerable.Empty<SelectedItem>();
        }
        StateHasChanged();
    }
}

Fixed button text

Set IsFixedButtonText to true make the ButtonText to const

Demo

@inject IStringLocalizer<DropdownIsFixedButtonText> Localizer

<Dropdown TValue="string" Items="RadioItems" IsFixedButtonText="true" />

@code {
    private List<SelectedItem> RadioItems { get; set; } = new List<SelectedItem>();

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        RadioItems = new List<SelectedItem>
        {
            new SelectedItem("1", Localizer["Item1"]) { Active = true },
            new SelectedItem("2", Localizer["Item2"])
        };
    }
}

Set the fixed button text

Set the FixedButtonText value for fixed button text

Demo

@inject IStringLocalizer<DropdownFixedButtonText> Localizer

<Dropdown TValue="string" Items="RadioItems" IsFixedButtonText="true" FixedButtonText="@Localizer["City"]" />

@code {
    private List<SelectedItem> RadioItems { get; set; } = new List<SelectedItem>();

    /// <summary>
    /// OnInitialized
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        RadioItems = new List<SelectedItem>
        {
            new SelectedItem("1", Localizer["Item1"]) { Active = true },
            new SelectedItem("2", Localizer["Item2"])
        };
    }
}

Attributes

Event

@page "/dropdowns"
@inject IStringLocalizer<Dropdowns> Localizer

<h3>Dropdown</h3>

<h4>Collapse actions or menus into drop-down menus</h4>

<DemoBlock Title="Basic usage" Introduction="Use <code>TagName='a'</code> to open a drop-down list with a button tag" Name="Normal" Demo="typeof(Demos.Dropdown.DropdownNormal)" />

<DemoBlock Title="Dropdown empty drop-down menu" Introduction="Allow empty <code>Items</code> drop-down menus" Name="Null" Demo="typeof(Demos.Dropdown.DropdownNull)" />

<DemoBlock Title="Drop-down box with color" Introduction='Provide warning message boxes in various colors. Quote <code>Color='Color.Primary'</code> and other color and style classes to define the appearance of the drop-down menu' Name="Color" Demo="typeof(Demos.Dropdown.DropdownColor)" />

<DemoBlock Title="Split button drop-down menu" Introduction='You can create a split drop-down menu with tags similar to a single button drop-down menu, and add ShowSplit='true' (you need to add <code>DropdownType='DropdownType.ButtonGroup</code>') when you use a split component. Insert this symbol as a drop-down The options are handled at appropriate intervals (distance).' Name="Split" Demo="typeof(Demos.Dropdown.DropdownSplit)" />

<DemoBlock Title="Size definition" Introduction="The drop-down menu has a variety of size specifications to choose from <code>Size</code> attributes, including preset and split button drop-down menus." Name="Size" Demo="typeof(Demos.Dropdown.DropdownSize)" />

<DemoBlock Title="Expanding direction" Introduction='Add the style of <code>Direction='Direction.Dropup'</code> to make the drop-down menu expand upward.' Name="Direction" Demo="typeof(Demos.Dropdown.DropdownDirection)" />

<DemoBlock Title="Menu alignment" Introduction='By default, the right side of the drop-down menu is aligned by setting <code>MenuAlignment=Alignment.Right</code>' Name="Alignment" Demo="typeof(Demos.Dropdown.DropdownAlignment)" />

<DemoBlock Title="Bind data source" Introduction='When you click the button on the right, the menu items in the drop-down box will increase' Name="Items" Demo="typeof(Demos.Dropdown.DropdownItems)" />

<DemoBlock Title="Bind data source" Introduction="When you change the options, the menu items in the drop-down box will increase" Name="Radio" Demo="typeof(Demos.Dropdown.DropdownRadio)" />

<DemoBlock Title="Cascade binding" Introduction="By selecting different options in the first drop-down box, the second drop-down box is filled with content dynamically." Name="Cascade" Demo="typeof(Demos.Dropdown.DropdownCascade)" />

<DemoBlock Title="Fixed button text" Introduction="Set <code>IsFixedButtonText</code> to <b>true</b> make the ButtonText to const" Name="IsFixedButtonText" Demo="typeof(Demos.Dropdown.DropdownIsFixedButtonText)" />

<DemoBlock Title="Set the fixed button text" Introduction="Set the <code>FixedButtonText</code> value for fixed button text" Name="FixedButtonText" Demo="typeof(Demos.Dropdown.DropdownFixedButtonText)" />

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// Dropdowns
/// </summary>
public sealed partial class Dropdowns
{
    /// <summary>
    /// GetAttributes
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
        // TODO: 移动到数据库中
        new AttributeItem() {
            Name = "Value",
            Description = Localizer["ADesc1"],
            Type = "TValue",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "Class",
            Description = Localizer["ADesc2"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "Color",
            Description = Localizer["ADesc3"],
            Type = "Color",
            ValueList = "Primary / Secondary / Info / Warning / Danger ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "Direction",
            Description = Localizer["ADesc4"],
            Type = "Direction",
            ValueList = "Dropup / Dropright /  Dropleft",
            DefaultValue = " None "
        },
        new AttributeItem() {
            Name = "Items",
            Description = Localizer["ADesc5"],
            Type = "list",
            ValueList = " — ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "MenuAlignment",
            Description = Localizer["ADesc6"],
            Type = "Alignment",
            ValueList = "None / Left / Center / Right ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "MenuItem",
            Description = Localizer["ADesc7"],
            Type = "string",
            ValueList = "button / a ",
            DefaultValue = " a "
        },
        new AttributeItem() {
            Name = "Responsive",
            Description = Localizer["ADesc8"],
            Type = "string",
            ValueList = "dropdown-menu / dropdown-menu-end / dropdown-menu-{lg | md | sm }-{right | left}",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = "ShowSplit",
            Description = Localizer["ADesc9"],
            Type = "bool",
            ValueList = "true / false ",
            DefaultValue = " false "
        },
        new AttributeItem() {
            Name = "Size",
            Description = Localizer["ADesc10"],
            Type = "Size",
            ValueList = "None / ExtraSmall / Small / Medium / Large / ExtraLarge / ExtraExtraLarge",
            DefaultValue = "None"
        },
        new AttributeItem() {
            Name = "TagName",
            Description = Localizer["ADesc11"],
            Type = "string",
            ValueList = " a / button ",
            DefaultValue = " — "
        },
        new AttributeItem() {
            Name = nameof(Dropdown<string>.FixedButtonText),
            Description = Localizer["FixedButtonText"],
            Type = "string",
            ValueList = " — ",
            DefaultValue = " — "
        }
    };

    /// <summary>
    /// GetEvents
    /// </summary>
    /// <returns></returns>
    private IEnumerable<EventItem> GetEvents() => new EventItem[]
    {
        new EventItem()
        {
            Name = "OnSelectedItemChanged",
            Description= Localizer["EDesc1"],
            Type ="Func<SelectedItem, Task>"
        }
   };
}

Dropdown

Collapse actions or menus into drop-down menus

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Event

Bootstrap Blazor Component library updated to 7.2.5-beta02