
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
By default, the right side of the drop-down menu is aligned by setting MenuAlignment=Alignment.Right
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
Set the FixedButtonText
value for fixed button text
Demo
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>"
}
};
}