!3735 doc(#I69CTG): update dropdown demos

* format code
* update localize
* update dropdown demos

src/BootstrapBlazor.Shared/Demos/Dropdown/DropdownAlignment.razor

@@ -0,0 +1,56 @@
+@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"},
+        };
+    }
+}

src/BootstrapBlazor.Shared/Demos/Dropdown/DropdownCascade.razor

@@ -0,0 +1,63 @@
+@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();
+    }
+}

src/BootstrapBlazor.Shared/Demos/Dropdown/DropdownColor.razor

@@ -0,0 +1,35 @@
+@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"},
+        };
+    }
+}

src/BootstrapBlazor.Shared/Demos/Dropdown/DropdownDirection.razor

@@ -0,0 +1,35 @@
+@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"},
+        };
+    }
+}

src/BootstrapBlazor.Shared/Demos/Dropdown/DropdownFixedButtonText.razor

@@ -0,0 +1,21 @@
+@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"])
+        };
+    }
+}

src/BootstrapBlazor.Shared/Demos/Dropdown/DropdownIsFixedButtonText.razor

@@ -0,0 +1,21 @@
+@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"])
+        };
+    }
+}

src/BootstrapBlazor.Shared/Demos/Dropdown/DropdownItems.razor

@@ -0,0 +1,50 @@
+@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"},
+        };
+    }
+}

src/BootstrapBlazor.Shared/Demos/Dropdown/DropdownNormal.razor

@@ -0,0 +1,37 @@
+@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"},
+        };
+    }
+}

src/BootstrapBlazor.Shared/Demos/Dropdown/DropdownNull.razor

@@ -0,0 +1,5 @@
+<Dropdown TValue="string" Items="EmptyList" Color="Color.Secondary" />
+
+@code {
+    private static List<SelectedItem> EmptyList => new();
+}

src/BootstrapBlazor.Shared/Demos/Dropdown/DropdownRadio.razor

@@ -0,0 +1,51 @@
+@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;
+    }
+}

src/BootstrapBlazor.Shared/Demos/Dropdown/DropdownSize.razor

@@ -0,0 +1,41 @@
+@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"},
+        };
+    }
+}

src/BootstrapBlazor.Shared/Demos/Dropdown/DropdownSplit.razor

@@ -0,0 +1,35 @@
+@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"},
+        };
+    }
+}

src/BootstrapBlazor.Shared/Locales/en.json

@@ -1705,34 +1705,31 @@
   },
   "BootstrapBlazor.Shared.Samples.Dropdowns": {
     "Title": "Dropdown",
-    "H1": "Collapse actions or menus into drop-down menus",
+    "Description": "Collapse actions or menus into drop-down menus",
-    "Block1Title": "Basic usage",
+    "NormalTitle": "Basic usage",
-    "Block1Intro": "Use <code>TagName='a'</code> to open a drop-down list with a button tag",
+    "NormalIntro": "Use <code>TagName='a'</code> to open a drop-down list with a button tag",
-    "Block2Title": "Dropdown empty drop-down menu",
+    "NullTitle": "Dropdown empty drop-down menu",
-    "Block2Intro": "Allow empty <code>Items</code> drop-down menus",
+    "NullIntro": "Allow empty <code>Items</code> drop-down menus",
-    "Block3Title": "Drop-down box with color",
+    "ColorTitle": "Drop-down box with color",
-    "Block3Intro": "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",
+    "ColorIntro": "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",
-    "Block4Title": "Split button drop-down menu",
+    "SplitTitle": "Split button drop-down menu",
-    "Block4Intro": "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).",
+    "SplitIntro": "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).",
-    "Block5Title": "Size definition",
+    "SizeTitle": "Size definition",
-    "Block5Intro": "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.",
+    "SizeIntro": "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.",
-    "Block6Title": "Expanding direction",
+    "DirectionTitle": "Expanding direction",
-    "Block6Intro": "Add the style of <code>Direction='Direction.Dropup'</code> to make the drop-down menu expand upward.",
+    "DirectionIntro": "Add the style of <code>Direction='Direction.Dropup'</code> to make the drop-down menu expand upward.",
-    "Block7Title": "Menu alignment",
+    "AlignmentTitle": "Menu alignment",
-    "Block7Intro": "By default, the right side of the drop-down menu is aligned by setting <code>MenuAlignment=Alignment.Right</code>",
+    "AlignmentIntro": "By default, the right side of the drop-down menu is aligned by setting <code>MenuAlignment=Alignment.Right</code>",
-    "Block8Title": "Bind data source",
+    "ItemsTitle": "Bind data source",
-    "Block8Intro": "When you click the button on the right, the menu items in the drop-down box will increase",
+    "ItemsIntro": "When you click the button on the right, the menu items in the drop-down box will increase",
-    "Button1Text": "Add",
+    "RadioTitle": "Bind data source",
-    "Button2Text": "Delete",
+    "RadioIntro": "When you change the options, the menu items in the drop-down box will increase",
-    "Block9Title": "Bind data source",
+    "CascadeTitle": "Cascade binding",
-    "Block9Intro": "When you change the options, the menu items in the drop-down box will increase",
+    "CascadeIntro": "By selecting different options in the first drop-down box, the second drop-down box is filled with content dynamically.",
-    "Block10Title": "Cascade binding",
-    "Block10Intro": "By selecting different options in the first drop-down box, the second drop-down box is filled with content dynamically.",
     "IsFixedButtonTextTitle": "Fixed button text",
-    "IsFixedButtonTextIntro": "Set <code>IsFixedButtonText</code> to <b>true</true> make the ButtonText to const",
+    "IsFixedButtonTextIntro": "Set <code>IsFixedButtonText</code> to <b>true</b> make the ButtonText to const",
     "FixedButtonTextTitle": "Set the fixed button text",
     "FixedButtonTextIntro": "Set the <code>FixedButtonText</code> value for fixed button text",
-    "FixedButtonTextCity": "City",
     "ADesc1": "Currently selected value",
     "ADesc2": "Style",
     "ADesc3": "Color",
@@ -1745,20 +1742,69 @@
     "ADesc10": "Size",
     "ADesc11": "Label",
     "EDesc1": "Triggered when the value of the drop-down box changes",
-    "FixedButtonText": "The text of fixed button",
+    "FixedButtonText": "The text of fixed button"
-    "V1": "Melbourne",
+  },
-    "V2": "Sydney",
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownNormal": {
-    "V3": "Queensland",
+    "Item1": "Melbourne",
-    "F1": "Melbourne",
+    "Item2": "Sydney",
-    "F2": "Sydney",
+    "Item3": "Queensland"
-    "F3": "Queensland",
+  },
-    "I1": "Select ...",
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownColor": {
-    "I2": "Melbourne",
+    "Item1": "Melbourne",
-    "I3": "Sydney",
+    "Item2": "Sydney",
-    "I4": "Hangzhou",
+    "Item3": "Queensland"
-    "RI1": "Melbourne",
+  },
-    "RI2": "Sydney",
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownSplit": {
-    "RI3": "Queensland"
+    "Item1": "Melbourne",
+    "Item2": "Sydney",
+    "Item3": "Queensland"
+  },
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownSize": {
+    "Item1": "Melbourne",
+    "Item2": "Sydney",
+    "Item3": "Queensland"
+  },
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownDirection": {
+    "Item1": "Melbourne",
+    "Item2": "Sydney",
+    "Item3": "Queensland"
+  },
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownAlignment": {
+    "Item1": "Melbourne",
+    "Item2": "Sydney",
+    "Item3": "Queensland"
+  },
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownItems": {
+    "Item1": "Melbourne",
+    "Item2": "Sydney",
+    "Item3": "Queensland",
+    "AddItem": "Add",
+    "RemoveItem": "Remove",
+    "City": "City"
+  },
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownRadio": {
+    "Item1": "Melbourne",
+    "Item2": "Sydney",
+    "Item3": "Queensland"
+  },
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownCascade": {
+    "Item1": "Select ...",
+    "Item2": "Melbourne",
+    "Item3": "Sydney",
+    "Item4": "Hangzhou",
+    "Item5": "chaoyang",
+    "Item6": "haidian",
+    "Item7": "jingan",
+    "Item8": "huangpu"
+  },
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownIsFixedButtonText": {
+    "Item1": "Melbourne",
+    "Item2": "Sydney"
+  },
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownFixedButtonText": {
+    "Item1": "Melbourne",
+    "Item2": "Sydney",
+    "City": "City"
   },
   "BootstrapBlazor.Shared.Samples.GoTops": {
     "Title": "GoTop",

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -1708,34 +1708,31 @@
   },
   "BootstrapBlazor.Shared.Samples.Dropdowns": {
     "Title": "Dropdown 下拉菜单",
-    "H1": "将动作或菜单折叠到下拉菜单中",
+    "Description": "将动作或菜单折叠到下拉菜单中",
-    "Block1Title": "基础用法",
+    "NormalTitle": "基础用法",
-    "Block1Intro": "使用 <code>TagName='a'</code> 开启带有 button 标签的下拉表",
+    "NormalIntro": "使用 <code>TagName='a'</code> 开启带有 button 标签的下拉表",
-    "Block2Title": "Dropdown 空下拉菜单",
+    "NullTitle": "Dropdown 空下拉菜单",
-    "Block2Intro": "允许空 <code>Items</code> 存在的下拉菜单",
+    "NullIntro": "允许空 <code>Items</code> 存在的下拉菜单",
-    "Block3Title": "带有颜色的下拉框",
+    "ColorTitle": "带有颜色的下拉框",
-    "Block3Intro": "提供各种颜色的警告信息框 引用 <code>Color='Color.Primary'</code> 等颜色及样式类来定义下拉菜单的外在表现",
+    "ColorIntro": "提供各种颜色的警告信息框 引用 <code>Color='Color.Primary'</code> 等颜色及样式类来定义下拉菜单的外在表现",
-    "Block4Title": "分裂式按钮下拉菜单",
+    "SplitTitle": "分裂式按钮下拉菜单",
-    "Block4Intro": "可用与单个按钮下拉菜单近似的标记创建分裂式下拉菜单，添加 <code>ShowSplit='true'</code> (使用分裂式组件时需要加上 <code>DropdownType='DropdownType.ButtonGroup</code>') 插入此符号为下拉选项作适当的间隔（距）处理。",
+    "SplitIntro": "可用与单个按钮下拉菜单近似的标记创建分裂式下拉菜单，添加 <code>ShowSplit='true'</code> (使用分裂式组件时需要加上 <code>DropdownType='DropdownType.ButtonGroup</code>') 插入此符号为下拉选项作适当的间隔（距）处理。",
-    "Block5Title": "尺寸大小定义",
+    "SizeTitle": "尺寸大小定义",
-    "Block5Intro": "下拉菜单有各种大小规格可以选用 <code>Size</code> 属性，包括预设及分裂式按钮下拉菜单。",
+    "SizeIntro": "下拉菜单有各种大小规格可以选用 <code>Size</code> 属性，包括预设及分裂式按钮下拉菜单。",
-    "Block6Title": "展开方向",
+    "DirectionTitle": "展开方向",
-    "Block6Intro": "增加 <code>Direction='Direction.Dropup'</code> 样式，使下拉菜单向上展开。",
+    "DirectionIntro": "增加 <code>Direction='Direction.Dropup'</code> 样式，使下拉菜单向上展开。",
-    "Block7Title": "菜单对齐",
+    "AlignmentTitle": "菜单对齐",
-    "Block7Intro": "默认情况下，通过设置 <code>MenuAlignment=Alignment.Right</code> 使下拉菜单右侧对齐",
+    "AlignmentIntro": "默认情况下，通过设置 <code>MenuAlignment=Alignment.Right</code> 使下拉菜单右侧对齐",
-    "Block8Title": "绑定数据源",
+    "ItemsTitle": "绑定数据源",
-    "Block8Intro": "点击右侧按钮时，下拉框内菜单项会增加",
+    "ItemsIntro": "点击右侧按钮时，下拉框内菜单项会增加",
-    "Button1Text": "添加",
+    "RadioTitle": "绑定数据源",
-    "Button2Text": "删除",
+    "RadioIntro": "改变选项时，下拉框内菜单项会增加",
-    "Block9Title": "绑定数据源",
+    "CascadeTitle": "级联绑定",
-    "Block9Intro": "改变选项时，下拉框内菜单项会增加",
+    "CascadeIntro": "通过选择第一个下拉框不同选项，第二个下拉框动态填充内容。",
-    "Block10Title": "级联绑定",
-    "Block10Intro": "通过选择第一个下拉框不同选项，第二个下拉框动态填充内容。",
     "IsFixedButtonTextTitle": "固定按钮文本",
     "IsFixedButtonTextIntro": "通过设置 <code>IsFixedButtonText</code> 使更改下拉选项时按钮文本不变",
     "FixedButtonTextTitle": "设置固定按钮文字",
     "FixedButtonTextIntro": "通过设置 <code>FixedButtonText</code> 来设置固定按钮的初始文字",
-    "FixedButtonTextCity": "城市",
     "ADesc1": "当前选中的值",
     "ADesc2": "样式",
     "ADesc3": "颜色",
@@ -1748,20 +1745,70 @@
     "ADesc10": "尺寸",
     "ADesc11": "标签",
     "EDesc1": "下拉框值发生改变时触发",
-    "FixedButtonText": "固定按钮显示文字",
+    "FixedButtonText": "固定按钮显示文字"
-    "V1": "北京",
+  },
-    "V2": "上海",
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownNormal": {
-    "V3": "广州",
+    "Item1": "北京",
-    "F1": "北京",
+    "Item2": "上海",
-    "F2": "上海",
+    "Item3": "广州"
-    "F3": "广州",
+  },
-    "I1": "请选择 ...",
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownColor": {
-    "I2": "北京",
+    "Item1": "北京",
-    "I3": "上海",
+    "Item2": "上海",
-    "I4": "杭州",
+    "Item3": "广州"
-    "RI1": "北京",
+  },
-    "RI2": "上海",
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownSplit": {
-    "RI3": "广州"
+    "Item1": "北京",
+    "Item2": "上海",
+    "Item3": "广州"
+  },
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownSize": {
+    "Item1": "北京",
+    "Item2": "上海",
+    "Item3": "广州"
+  },
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownDirection": {
+    "Item1": "北京",
+    "Item2": "上海",
+    "Item3": "广州"
+  },
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownAlignment": {
+    "Item1": "北京",
+    "Item2": "上海",
+    "Item3": "广州"
+  },
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownItems": {
+    "Item1": "北京",
+    "Item2": "上海",
+    "Item3": "广州",
+    "AddItem": "添加",
+    "RemoveItem": "删除",
+    "City": "城市"
+  },
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownRadio": {
+    "Item1": "北京",
+    "Item2": "上海",
+    "Item3": "广州",
+    "City": "城市"
+  },
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownCascade": {
+    "Item1": "请选择 ...",
+    "Item2": "北京",
+    "Item3": "上海",
+    "Item4": "杭州",
+    "Item5": "朝阳区",
+    "Item6": "海淀区",
+    "Item7": "静安区",
+    "Item8": "黄浦区"
+  },
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownIsFixedButtonText": {
+    "Item1": "北京",
+    "Item2": "上海"
+  },
+  "BootstrapBlazor.Shared.Demos.Dropdown.DropdownFixedButtonText": {
+    "Item1": "北京",
+    "Item2": "上海",
+    "City": "城市"
   },
   "BootstrapBlazor.Shared.Samples.GoTops": {
     "Title": "GoTop 返回顶端组件",

src/BootstrapBlazor.Shared/Samples/Dropdowns.razor

@@ -3,108 +3,31 @@
 
 <h3>@Localizer["Title"]</h3>
 
-<h4>@Localizer["H1"]</h4>
+<h4>@Localizer["Description"]</h4>
 
-<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
+<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal" Demo="typeof(Demos.Dropdown.DropdownNormal)" />
-    <Dropdown TValue="string" Items="Items" OnSelectedItemChanged="@ShowMessage" Color="Color.Secondary"></Dropdown>
-    <BlockLogger @ref="Trace" class="mt-3" />
-</DemoBlock>
 
-<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="Null">
+<DemoBlock Title="@Localizer["NullTitle"]" Introduction="@Localizer["NullIntro"]" Name="Null" Demo="typeof(Demos.Dropdown.DropdownNull)" />
-    <Dropdown TValue="string" Items="EmptyList" OnSelectedItemChanged="@ShowMessage" Color="Color.Secondary"></Dropdown>
-</DemoBlock>
 
-<DemoBlock Title="@Localizer["Block3Title"]" Introduction='@Localizer["Block3Intro"]' Name="Color">
+<DemoBlock Title="@Localizer["ColorTitle"]" Introduction='@Localizer["ColorIntro"]' Name="Color" Demo="typeof(Demos.Dropdown.DropdownColor)" />
-    <div class="row g-3">
-        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Color="Color.Primary"></Dropdown></div>
-        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Color="Color.Info"></Dropdown></div>
-        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Color="Color.Warning"></Dropdown></div>
-        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Color="Color.Danger"></Dropdown></div>
-    </div>
-</DemoBlock>
 
-<DemoBlock Title="@Localizer["Block4Title"]" Introduction='@Localizer["Block4Intro"]' Name="Split">
+<DemoBlock Title="@Localizer["SplitTitle"]" Introduction='@Localizer["SplitIntro"]' Name="Split" Demo="typeof(Demos.Dropdown.DropdownSplit)" />
-    <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"></Dropdown></div>
-        <div class="col-6 col-sm-4 col-md-3"><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"><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"><Dropdown TValue="string" DropdownType="DropdownType.ButtonGroup" Items="Items" ShowSplit="true" Color="Color.Danger"></Dropdown></div>
-    </div>
-</DemoBlock>
 
-<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="Size">
+<DemoBlock Title="@Localizer["SizeTitle"]" Introduction="@Localizer["SizeIntro"]" Name="Size" Demo="typeof(Demos.Dropdown.DropdownSize)" />
-    <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"></Dropdown></div>
-        <div class="col-6 col-sm-4 col-md-3 col-xl-auto"><Dropdown TValue="string" Items="Items" Size="Size.Small"></Dropdown></div>
-        <div class="col-6 col-sm-4 col-md-3 col-xl-auto"><Dropdown TValue="string" Items="Items" Size="Size.Medium"></Dropdown></div>
-        <div class="col-6 col-sm-4 col-md-3 col-xl-auto"><Dropdown TValue="string" Items="Items" Size="Size.Large"></Dropdown></div>
-        <div class="col-6 col-sm-4 col-md-3 col-xl-auto"><Dropdown TValue="string" Items="Items" Size="Size.ExtraLarge"></Dropdown></div>
-        <div class="col-6 col-sm-4 col-md-3 col-xl-auto"><Dropdown TValue="string" Items="Items" Size="Size.ExtraExtraLarge"></Dropdown></div>
-    </div>
-</DemoBlock>
 
-<DemoBlock Title="@Localizer["Block6Title"]" Introduction='@Localizer["Block6Intro"]' Name="Direction">
+<DemoBlock Title="@Localizer["DirectionTitle"]" Introduction='@Localizer["DirectionIntro"]' Name="Direction" Demo="typeof(Demos.Dropdown.DropdownDirection)" />
-    <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"></Dropdown></div>
-        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Direction="Direction.Dropright" ShowLabel="true" DisplayText="End"></Dropdown></div>
-        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Direction="Direction.Dropup" ShowLabel="true" DisplayText="Up"></Dropdown></div>
-        <div class="col-6 col-sm-4 col-md-3"><Dropdown TValue="string" Items="Items" Direction="Direction.Dropdown" ShowLabel="true" DisplayText="Down"></Dropdown></div>
-    </div>
-</DemoBlock>
 
-<DemoBlock Title="@Localizer["Block7Title"]" Introduction='@Localizer["Block7Title"]' Name="Alignment">
+<DemoBlock Title="@Localizer["AlignmentTitle"]" Introduction='@Localizer["AlignmentIntro"]' Name="Alignment" Demo="typeof(Demos.Dropdown.DropdownAlignment)" />
-    <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"></Dropdown></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"></Dropdown></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"></Dropdown></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"></Dropdown></div>
-    </div>
-</DemoBlock>
 
-<DemoBlock Title="@Localizer["Block8Title"]" Introduction='@Localizer["Block8Intro"]' Name="Items">
+<DemoBlock Title="@Localizer["ItemsTitle"]" Introduction='@Localizer["ItemsIntro"]' Name="Items" Demo="typeof(Demos.Dropdown.DropdownItems)" />
-    <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["Button1Text"]</Button>
-            <Button @onclick="@RemoveItem" Color="Color.Danger">@Localizer["Button2Text"]</Button>
-        </div>
-    </div>
-</DemoBlock>
 
-<DemoBlock Title="@Localizer["Block9Title"]" Introduction="@Localizer["Block9Intro"]" Name="Radio">
+<DemoBlock Title="@Localizer["RadioTitle"]" Introduction="@Localizer["RadioIntro"]" Name="Radio" Demo="typeof(Demos.Dropdown.DropdownRadio)" />
-    <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="@Localizer["Block10Title"]" Introduction="@Localizer["Block10Intro"]" Name="Cascade">
+<DemoBlock Title="@Localizer["CascadeTitle"]" Introduction="@Localizer["CascadeIntro"]" Name="Cascade" Demo="typeof(Demos.Dropdown.DropdownCascade)" />
-    <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="@Localizer["IsFixedButtonTextTitle"]" Introduction="@Localizer["IsFixedButtonTextIntro"]" Name="IsFixedButtonText">
+<DemoBlock Title="@Localizer["IsFixedButtonTextTitle"]" Introduction="@Localizer["IsFixedButtonTextIntro"]" Name="IsFixedButtonText" Demo="typeof(Demos.Dropdown.DropdownIsFixedButtonText)" />
-    <Dropdown TValue="string" Items="RadioItems" IsFixedButtonText="true" />
-</DemoBlock>
 
-<DemoBlock Title="@Localizer["FixedButtonTextTitle"]" Introduction="@Localizer["FixedButtonTextIntro"]" Name="FixedButtonText">
+<DemoBlock Title="@Localizer["FixedButtonTextTitle"]" Introduction="@Localizer["FixedButtonTextIntro"]" Name="FixedButtonText" Demo="typeof(Demos.Dropdown.DropdownFixedButtonText)" />
-    <Dropdown TValue="string" Items="RadioItems" IsFixedButtonText="true" FixedButtonText="@Localizer["FixedButtonTextCity"]"></Dropdown>
-</DemoBlock>
 
 <AttributeTable Items="@GetAttributes()" />
 

src/BootstrapBlazor.Shared/Samples/Dropdowns.razor.cs

@@ -5,122 +5,14 @@
 namespace BootstrapBlazor.Shared.Samples;
 
 /// <summary>
-///
+/// Dropdowns
 /// </summary>
 public sealed partial class Dropdowns
 {
-    private List<SelectedItem> Items { get; set; } = new List<SelectedItem> { };
-    private static List<SelectedItem> EmptyList => new();
-    private List<SelectedItem> Foos { get; set; } = new List<SelectedItem>();
-    private List<SelectedItem> RadioItems { get; set; } = new List<SelectedItem>();
-    private List<SelectedItem> RadioDropDownItems { get; set; } = new List<SelectedItem>();
-
-    private IEnumerable<SelectedItem>? Items2 { get; set; }
-    private IEnumerable<SelectedItem> Items3 = new SelectedItem[] { };
-
     /// <summary>
-    /// 
+    /// GetAttributes
     /// </summary>
-    protected override void OnInitialized()
+    /// <returns></returns>
-    {
-        base.OnInitialized();
-
-        Items = new List<SelectedItem>
-        {
-            new SelectedItem{ Text=Localizer["V1"], Value="0"},
-            new SelectedItem{ Text=Localizer["V2"], Value="1"},
-            new SelectedItem{ Text=Localizer["V3"], Value="2"},
-        };
-
-        Foos = new List<SelectedItem>
-        {
-            new SelectedItem{ Text=Localizer["F1"], Value="0"},
-            new SelectedItem{ Text=Localizer["F2"], Value="1"},
-            new SelectedItem{ Text=Localizer["F3"], Value="2"},
-        };
-
-        Items3 = new SelectedItem[]
-        {
-            new SelectedItem ("", Localizer["I1"]),
-            new SelectedItem ("Beijing", Localizer["I2"]) { Active = true },
-            new SelectedItem ("Shanghai", Localizer["I3"]),
-            new SelectedItem ("Hangzhou", Localizer["I4"])
-        };
-
-        RadioDropDownItems = new List<SelectedItem>
-        {
-            new SelectedItem("1", Localizer["RI1"]) { Active = true },
-            new SelectedItem("2", Localizer["RI2"]),
-            new SelectedItem("3", Localizer["RI3"])
-        };
-
-        RadioItems = new List<SelectedItem>
-        {
-            new SelectedItem("1", Localizer["RI1"]) { Active = true },
-            new SelectedItem("2", Localizer["RI2"])
-        };
-    }
-
-/// <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: 移动到数据库中
@@ -210,6 +102,10 @@ private async Task OnCascadeBindSelectClick(SelectedItem item)
         }
     };
 
+    /// <summary>
+    /// GetEvents
+    /// </summary>
+    /// <returns></returns>
     private IEnumerable<EventItem> GetEvents() => new EventItem[]
     {
         new EventItem()