Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

Dropdown

Collapse actions or menus into drop-down menus

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

Demo

Allow empty Items drop-down menus

Demo

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

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

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

Demo

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

Demo

Bind data source

Demo

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

Demo

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

Demo

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

Demo

Set IsFixedButtonText to true make the ButtonText to const

Demo

Attributes

Loading...

Event

Loading...
@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">
    <Dropdown TValue="string" Items="Items" OnSelectedItemChanged="@ShowMessage" Color="Color.Secondary"></Dropdown>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="Dropdown empty drop-down menu" Introduction="Allow empty <code>Items</code> drop-down menus" Name="Null">
    <Dropdown TValue="string" Items="EmptyList" OnSelectedItemChanged="@ShowMessage" Color="Color.Secondary"></Dropdown>
</DemoBlock>

<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">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" Items="Items" Color="Color.Primary"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" Items="Items" Color="Color.Secondary"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" Items="Items" Color="Color.Info"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" Items="Items" Color="Color.Warning"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" Items="Items" Color="Color.Danger"></Dropdown></div>
    </div>
</DemoBlock>

<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">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Primary"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Secondary"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Info"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Warning"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Danger"></Dropdown></div>
    </div>
</DemoBlock>

<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">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" Items="Items" Size="Size.ExtraSmall"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" Items="Items" Size="Size.Small"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" Items="Items" Size="Size.Medium"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" Items="Items" Size="Size.Large"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" Items="Items" Size="Size.ExtraLarge"></Dropdown></div>
    </div>
</DemoBlock>

<DemoBlock Title="Expanding direction" Introduction='Add the style of <code>Direction='Direction.Dropup'</code> to make the drop-down menu expand upward.' Name="Direction">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" Items="Items" Direction="Direction.Dropleft"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" Items="Items" Direction="Direction.Dropup"></Dropdown></div>
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" Items="Items" Direction="Direction.Dropright"></Dropdown></div>
    </div>
</DemoBlock>

<DemoBlock Title="Menu alignment" Introduction='Bind data source' Name="Alignment">
    <div class="row">
        <div class="col-6 col-sm-4 col-md-3 col-lg-auto"><Dropdown TValue="string" Items="Items" Color="Color.Secondary" MenuAlignment="Alignment.Right"></Dropdown></div>
    </div>
</DemoBlock>

<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">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Dropdown TValue="string" Items="@Foos">
            </Dropdown>
        </div>
        <div class="col-12 col-sm-6">
            <Button @onclick="@AddItem">Add</Button>
            <Button @onclick="@RemoveItem" Color="Color.Danger">Delete</Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="Bind data source" Introduction="When you change the options, the menu items in the drop-down box will increase" Name="Radio">
    <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>
</DemoBlock>

<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">
    <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>
</DemoBlock>

<DemoBlock Title="Fixed Button Text" Introduction="Set <code>IsFixedButtonText</code> to <b>true</true> make the ButtonText to const" Name="FixedButtonText">
    <Dropdown TValue="string" Items="RadioItems" IsFixedButtonText="true" />
</DemoBlock>

<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/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using BootstrapBlazor.Shared.Components;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
///
/// </summary>
public sealed partial class Dropdowns
{
    private List<SelectedItem> Items { get; set; } = new List<SelectedItem>
        {
            new SelectedItem{ Text="北京",Value="0"},
            new SelectedItem{ Text="上海",Value="1"},
            new SelectedItem{ Text="广州",Value="2"},
        };

    private static List<SelectedItem> EmptyList => new();

    private List<SelectedItem> Foos { get; set; } = new List<SelectedItem>
        {
            new SelectedItem{ Text="北京",Value="0"},
            new SelectedItem{ Text="上海",Value="1"},
            new SelectedItem{ Text="广州",Value="2"},
        };

    private List<SelectedItem> RadioItems { get; set; } = new List<SelectedItem>
        {
            new SelectedItem("1", "北京") { Active = true },
            new SelectedItem("2", "上海")
        };

    private List<SelectedItem> RadioDropDownItems { get; set; } = new List<SelectedItem>
        {
            new SelectedItem("1", "北京") { Active = true },
            new SelectedItem("2", "上海"),
            new SelectedItem("3", "广州")
        };

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

    private readonly IEnumerable<SelectedItem> Items3 = new SelectedItem[]
    {
            new SelectedItem ("", "请选择 ..."),
            new SelectedItem ("Beijing", "北京") { Active = true },
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Hangzhou", "杭州")
    };

    /// <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","朝阳区") { Active = true},
                    new SelectedItem("2","海淀区"),
            };
        }
        else if (item.Value == "Shanghai")
        {
            Items2 = new SelectedItem[]
            {
                    new SelectedItem("1","静安区"),
                    new SelectedItem("2","黄浦区") { Active = true } ,
            };
        }
        else
        {
            Items2 = Enumerable.Empty<SelectedItem>();
        }
        StateHasChanged();
    }

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

    private Task ShowMessage(SelectedItem e)
    {
        Trace.Log($"Dropdown Item Clicked: Value={e.Value} Text={e.Text}");
        return Task.CompletedTask;
    }

    private void AddItem()
    {
        Foos.Add(new SelectedItem($"{Foos.Count}", $"城市 {Foos.Count}"));
    }

    private void RemoveItem()
    {
        if (Foos.Any())
        {
            Foos.RemoveAt(0);
        }
    }

    private Task OnRadioItemChanged(IEnumerable<SelectedItem> values, SelectedItem item)
    {
        RadioDropDownItems.Add(new SelectedItem($"{RadioDropDownItems.Count + 1}", $"城市 {RadioDropDownItems.Count}"));
        StateHasChanged();
        return Task.CompletedTask;
    }

    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-right / dropdown-menu-right / 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",
                DefaultValue = "None"
            },
            new AttributeItem() {
                Name = "TagName",
                Description = Localizer["ADesc11"],
                Type = "string",
                ValueList = " a / button ",
                DefaultValue = " — "
            },
    };

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

B 站相关视频链接

暂无

交流群

QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Themes
Bootstrap
Motronic
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload