Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Dropdown

Collapse actions or menus into drop-down menus

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

Demo

Block2Intro

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

Attributes

Loading...

Event

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

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<Block Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]">
    <Dropdown TValue="string" Items="Items" OnSelectedItemChanged="@ShowMessage" Color="Color.Secondary"></Dropdown>
    <BlockLogger @ref="Trace" class="mt-3" />
</Block>

<Block Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]">
    <Dropdown TValue="string" Items="EmptyList" OnSelectedItemChanged="@ShowMessage" Color="Color.Secondary"></Dropdown>
</Block>

<Block Title="@Localizer["Blcok3Title"]" Introduction='@Localizer["Block3Intro"]'>
    <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>
</Block>

<Block Title="@Localizer["Block4Title"]" Introduction='@Localizer["Block4Intro"]'>
    <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>
</Block>

<Block Title="@Localizer["Blcok5Title"]" Introduction="@Localizer["Block5Intro"]">
    <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>
</Block>

<Block Title="@Localizer["Block6Title"]" Introduction='@Localizer["Block6Intro"]'>
    <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>
</Block>

<Block Title="@Localizer["Block7Title"]" Introduction='@Localizer["Block8Title"]'>
    <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>
</Block>

<Block Title="@Localizer["Block8Title"]" Introduction='@Localizer["Block8Intro"]'>
    <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">@Localizer["Button2Text"]</Button>
            <Button @onclick="@RemoveItem" Color="Color.Danger">@Localizer["Button1Text"]</Button>
        </div>
    </div>
</Block>

<Block Title="@Localizer["Block9Title"]" Introduction="@Localizer["Block9Intro"]">
    <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>
</Block>

<Block Title="@Localizer["Block10Title"]" Introduction="@Localizer["Block10Intro"]">
    <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>
</Block>

<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.Pages.Components;
using System.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <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 List<SelectedItem> EmptyList => new List<SelectedItem> { };

        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 = "@bind-Value",
                Description = Localizer["ADesc1"]!,
                Type = " — ",
                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( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload