Bootstrap Blazor enterprise-level UI component library

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

Up

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"])
        };
    }
}

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.4.4-beta01