doc(Dropdown): add sample code for ItemTemplate (#5374)

* refactor: 增强 ItemTemplate 模板

* style: 增加 tooltip 兼容样式

* doc: 增加 ItemTemplate 示例

* doc: 更新示例本地化资源文件

* chore: bump version 9.3.1-beta18

* refactor: 重构代码

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Dropdowns.razor

@@ -31,6 +31,17 @@
     </div>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["DropdownItemTemplateTitle"]" Introduction="@Localizer["DropdownItemTemplateIntro"]" Name="ItemTemplate">
+    <Dropdown TValue="string" Items="ItemTemplateList">
+        <ItemTemplate>
+            <Tooltip Title="just a tooltip text demo" Trigger="hover">
+                <span class="fa-solid fa-flag"></span>
+                <div class="ms-2 flex-fill">@context.Text</div>
+            </Tooltip>
+        </ItemTemplate>
+    </Dropdown>
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["SplitTitle"]" Introduction='@Localizer["SplitIntro"]' Name="Split">
     <div class="row g-3">
         <div class="col-6 col-sm-4 col-md-3">

src/BootstrapBlazor.Server/Components/Samples/Dropdowns.razor.cs

@@ -18,6 +18,8 @@ public sealed partial class Dropdowns
 
     private List<SelectedItem> Items { get; set; } = [];
 
+    private List<SelectedItem> ItemTemplateList { get; set; } = [];
+
     /// <summary>
     /// ShowMessage
     /// </summary>
@@ -41,6 +43,13 @@ protected override void OnInitialized()
             new SelectedItem() { Text=Localizer["Item3"], Value="2"},
         ];
 
+        ItemTemplateList =
+        [
+            new SelectedItem() { Text=Localizer["Item1"], Value="0"},
+            new SelectedItem() { Text=Localizer["Item2"], Value="1"},
+            new SelectedItem() { Text=Localizer["Item3"], Value="2"},
+        ];
+
         Foos =
         [
             new SelectedItem{ Text=Localizer["Item1"], Value="0"},

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -1813,7 +1813,9 @@
     "DropdownCascadeItem5": "Chaoyang",
     "DropdownCascadeItem6": "Haidian",
     "DropdownCascadeItem7": "Jingan",
-    "DropdownCascadeItem8": "Huangpu"
+    "DropdownCascadeItem8": "Huangpu",
+    "DropdownItemTemplateTitle": "Item Template",
+    "DropdownItemTemplateIntro": "By setting <code>ItemTemplate</code>, you can customize the content displayed in the drop-down item. In this example, the <code>Tooltip</code> component is used to add a tooltip function when the mouse is hovered."
   },
   "BootstrapBlazor.Server.Components.Samples.GoTops": {
     "Title": "GoTop",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -1813,7 +1813,9 @@
     "DropdownCascadeItem5": "朝阳区",
     "DropdownCascadeItem6": "海淀区",
     "DropdownCascadeItem7": "静安区",
-    "DropdownCascadeItem8": "黄浦区"
+    "DropdownCascadeItem8": "黄浦区",
+    "DropdownItemTemplateTitle": "下拉项模板",
+    "DropdownItemTemplateIntro": "通过设置 <code>ItemTemplate</code> 可以自定义下拉项显示内容，本例中通过自定义模板使用 <code>Tooltip</code> 组件增加鼠标悬浮是显示提示功能"
   },
   "BootstrapBlazor.Server.Components.Samples.GoTops": {
     "Title": "GoTop 返回顶端组件",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.3.1-beta17</Version>
+    <Version>9.3.1-beta18</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Dropdown/Dropdown.razor

@@ -38,11 +38,13 @@
             {
                 if (ItemTemplate != null)
                 {
-                    @ItemTemplate.Invoke(item)
+                    <div class="@ActiveItem(item)">
+                        @ItemTemplate(item)
+                    </div>
                 }
                 else if (item.IsDisabled)
                 {
-                    <div class="@DisableItem(item)">@item.Text</div>
+                    <div class="@ActiveItem(item)">@item.Text</div>
                 }
                 else
                 {

src/BootstrapBlazor/Components/Dropdown/Dropdown.razor.cs

@@ -63,14 +63,6 @@ public partial class Dropdown<TValue>
     /// <returns></returns>
     protected string? ActiveItem(SelectedItem item) => CssBuilder.Default("dropdown-item")
         .AddClass("active", () => item.Value == CurrentValueAsString)
-        .Build();
-
-    /// <summary>
-    /// 获得/设置 设置当前项是否 Active 方法
-    /// </summary>
-    /// <param name="item"></param>
-    /// <returns></returns>
-    protected string? DisableItem(SelectedItem item) => CssBuilder.Default("dropdown-item")
         .AddClass("disabled", item.IsDisabled)
         .Build();
 

src/BootstrapBlazor/Components/Tooltip/Tooltip.razor.scss

@@ -2,6 +2,11 @@
     display: inline-block;
 }
 
+.dropdown-item > span[data-bs-toggle="tooltip"] {
+    display: flex;
+    align-items: center;
+}
+
 .tooltip.is-invalid {
     --bs-tooltip-bg: var(--bs-danger);
 }