feat(Toolbar): add Toolbar component

src/BootstrapBlazor.Server/Components/Pages/Index.razor

@@ -6,7 +6,7 @@
 
 <section class="bd-masthead">
     <div class="container-xxl bd-gutter">
-        <div class="col-md-8 mx-auto text-center">
+        <div class="text-center d-flex align-items-center flex-column">
             <a class="d-inline-flex text-dark text-decoration-none" href="https://github.com/dotnetcore/BootstrapBlazor?wt.mc_id=DT-MVP-5004174" rel="noopener" target="_blank">
                 <span class="py-2 px-3 rounded-5 masthead-notice">
                     @Localizer["Support"]

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

@@ -1,4 +1,5 @@
 @page "/affix"
+@using Microsoft.AspNetCore.Components.Rendering
 
 <h3>@Localizer["AffixTitle"]</h3>
 

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

@@ -0,0 +1,54 @@
+@page "/toolbar"
+@inject IStringLocalizer<Toolbars> Localizer
+
+<h3>@Localizer["ToolbarsTitle"]</h3>
+
+<h4>@((MarkupString)Localizer["ToolbarSubTitle"].Value)</h4>
+
+<DemoBlock Title="@Localizer["NormalTitle"]"
+           Introduction="@Localizer["NormalIntro"]"
+           Name="Normal">
+    <Toolbar IsWrap="true">
+        <ToolbarItem>
+            <Button Icon="fa-solid fa-wand-magic-sparkles" IsOutline="true"></Button>
+        </ToolbarItem>
+        <ToolbarItem>
+            <CheckboxList IsButton="true" Items="_items2" @bind-Value="_item2" ShowButtonBorderColor="true">
+                <ItemTemplate>
+                    <i class="@GetRadioIconByItem(context.Value)"></i>
+                </ItemTemplate>
+            </CheckboxList>
+        </ToolbarItem>
+        <ToolbarItem>
+            <RadioList IsButton="true" Items="_items1" @bind-Value="_item1" ShowButtonBorderColor="true">
+                <ItemTemplate>
+                    <i class="@GetIconByItem(context.Value)"></i>
+                </ItemTemplate>
+            </RadioList>
+        </ToolbarItem>
+        <ToolbarItem>
+            <Select TValue="int" Color="Color.Primary" IsPopover="true" style="min-width: 120px;">
+                <Options>
+                    <SelectOption Value="1" Text="Text 1"></SelectOption>
+                    <SelectOption Value="2" Text="Text 2"></SelectOption>
+                    <SelectOption Value="3" Text="Text 3"></SelectOption>
+                </Options>
+            </Select>
+        </ToolbarItem>
+        <ToolbarItem>
+            <Dropdown TValue="string" Value="@_item3" Items="_items3" IsPopover="true"></Dropdown>
+        </ToolbarItem>
+        <ToolbarSpace></ToolbarSpace>
+        <ToolbarButtonGroup>
+            <Button Icon="fa-solid fa-save" IsOutline="true"></Button>
+            <Button Icon="fa-solid fa-save" IsOutline="true"></Button>
+            <Button Icon="fa-solid fa-save" IsOutline="true"></Button>
+        </ToolbarButtonGroup>
+        <ToolbarSeparator></ToolbarSeparator>
+        <ToolbarButtonGroup>
+            <Button Icon="fa-solid fa-save"></Button>
+            <Button Icon="fa-solid fa-save"></Button>
+            <Button Icon="fa-solid fa-save"></Button>
+        </ToolbarButtonGroup>
+    </Toolbar>
+</DemoBlock>

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

@@ -0,0 +1,55 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the Apache 2.0 License
+// See the LICENSE file in the project root for more information.
+// Maintainer: Argo Zhang([email protected]) Website: https://www.blazor.zone
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// Toolbar 组件示例代码
+/// </summary>
+public partial class Toolbars
+{
+    private readonly List<SelectedItem> _items1 = [];
+    private string _item1 = "1,2";
+
+    private readonly List<SelectedItem> _items2 = [];
+    private string _item2 = "1";
+
+    private readonly List<SelectedItem> _items3 = [];
+    private string _item3 = "1";
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _items1.Add(new SelectedItem("1", "Text1"));
+        _items1.Add(new SelectedItem("2", "Text2"));
+        _items1.Add(new SelectedItem("3", "Text3"));
+
+        _items2.Add(new SelectedItem("1", "Text1"));
+        _items2.Add(new SelectedItem("2", "Text2"));
+        _items2.Add(new SelectedItem("3", "Text3"));
+
+        _items3.Add(new SelectedItem("1", "Text1"));
+        _items3.Add(new SelectedItem("2", "Text2"));
+        _items3.Add(new SelectedItem("3", "Text3"));
+    }
+
+    private static string GetIconByItem(string v) => v switch
+    {
+        "1" => "fa-solid fa-align-left",
+        "2" => "fa-solid fa-align-center",
+        _ => "fa-solid fa-align-right"
+    };
+
+    private static string GetRadioIconByItem(string v) => v switch
+    {
+        "1" => "fa-solid fa-bold",
+        "2" => "fa-solid fa-italic",
+        _ => "fa-solid fa-font"
+    };
+}

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -1486,6 +1486,12 @@ void AddLayout(DemoMenuItem item)
                 {
                     Text = Localizer["Stack"],
                     Url = "stack"
+                },
+                new()
+                {
+                    IsNew = true,
+                    Text = Localizer["Toolbar"],
+                    Url = "toolbar"
                 }
             };
             AddBadge(item);

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

@@ -4845,7 +4845,8 @@
     "DataPackageAdapter": "DataPackageAdapter",
     "SocketAutoConnect": "Reconnect",
     "SocketDataEntity": "DataEntity",
-    "NetworkMonitor": "Network Monitor"
+    "NetworkMonitor": "Network Monitor",
+    "Toolbar": "Toolbar"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "Header grouping function",
@@ -7151,5 +7152,11 @@
     "IndicatorLi2": "Yellow: Average network (3G)",
     "IndicatorLi3": "Red: Poor network (2G)",
     "IndicatorLi4": "Gray: Offline"
+  },
+  "BootstrapBlazor.Server.Components.Samples.Toolbars": {
+    "ToolbarsTitle": "Toolbar",
+    "ToolbarSubTitle": "ToolBar component is a container for buttons or other application-specific tools",
+    "NormalTitle": "Normal",
+    "NormalIntro": ""
   }
 }

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

@@ -4845,7 +4845,8 @@
     "DataPackageAdapter": "数据适配器",
     "SocketAutoConnect": "自动重连",
     "SocketDataEntity": "通讯数据转实体类",
-    "NetworkMonitor": "网络状态 NetworkMonitor"
+    "NetworkMonitor": "网络状态 NetworkMonitor",
+    "Toolbar": "工具栏 Toolbar"
   },
   "BootstrapBlazor.Server.Components.Samples.Table.TablesHeader": {
     "TablesHeaderTitle": "表头分组功能",
@@ -7151,5 +7152,11 @@
     "IndicatorLi2": "黄色：网络一般 (3G)",
     "IndicatorLi3": "红色：网络差 (2G)",
     "IndicatorLi4": "灰色：离线状态"
+  },
+  "BootstrapBlazor.Server.Components.Samples.Toolbars": {
+    "ToolbarsTitle": "Toolbar 工具栏",
+    "ToolbarSubTitle": "是按钮或其他应用程序特定工具的容器",
+    "NormalTitle": "基本用法",
+    "NormalIntro": ""
   }
 }

src/BootstrapBlazor.Server/docs.json

@@ -248,7 +248,8 @@
     "socket/adapter": "Sockets\\Adapters",
     "socket/auto-connect": "Sockets\\AutoReconnects",
     "socket/data-entity": "Sockets\\DataEntities",
-    "network-monitor": "NetworkMonitors"
+    "network-monitor": "NetworkMonitors",
+    "toolbar": "Toolbars"
   },
   "video": {
     "table": "BV1ap4y1x7Qn?p=1",

src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor

@@ -15,7 +15,14 @@
             {
                 <DynamicElement TagName="span" TriggerClick="!IsDisabled" OnClick="() => OnClick(item)"
                                 class="@GetButtonItemClassString(item)">
-                    @item.Text
+                    @if (ItemTemplate != null)
+                    {
+                        @ItemTemplate(item)
+                    }
+                    else
+                    {
+                        @item.Text
+                    }
                 </DynamicElement>
             }
         </div>

src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor.cs

@@ -38,8 +38,9 @@ public partial class CheckboxList<TValue> : ValidateBase<TValue>
         .Build();
 
     private string? GetButtonItemClassString(SelectedItem item) => CssBuilder.Default("btn")
-        .AddClass($"btn-outline-{Color.ToDescriptionString()}")
-        .AddClass($"active", CurrentValueAsString.Split(',', StringSplitOptions.RemoveEmptyEntries).Contains(item.Value))
+        .AddClass($"border-secondary", !ShowButtonBorderColor)
+        .AddClass($"border-{Color.ToDescriptionString()}", ShowButtonBorderColor)
+        .AddClass($"active bg-{Color.ToDescriptionString()}", CurrentValueAsString.Split(',', StringSplitOptions.RemoveEmptyEntries).Contains(item.Value))
         .Build();
 
     /// <summary>
@@ -55,14 +56,20 @@ public partial class CheckboxList<TValue> : ValidateBase<TValue>
     [Parameter]
     public bool IsButton { get; set; }
 
+    /// <summary>
+    /// 获得/设置  是否显示按钮边框颜色 默认为 false
+    /// </summary>
+    [Parameter]
+    public bool ShowButtonBorderColor { get; set; }
+
     /// <summary>
     /// 获得/设置 Checkbox 组件布局样式
     /// </summary>
     [Parameter]
     public string? CheckboxItemClass { get; set; }
 
     /// <summary>
-    /// 获得/设置 是否显示边框 默认为 true
+    /// 获得/设置 非按钮模式下是否显示组件边框 默认为 true
     /// </summary>
     [Parameter]
     public bool ShowBorder { get; set; } = true;

src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor.scss

@@ -45,6 +45,14 @@
 
         > .btn {
             white-space: nowrap;
+
+            &:not(:first-child) {
+                border-left-color: transparent !important;
+            }
+
+            &:not(:last-child) {
+                border-right-color: transparent !important;
+            }
         }
 
         .active {
@@ -53,19 +61,13 @@
 
         &.disabled {
             > span {
-                --bs-btn-hover-color: var(--bs-btn-color);
-                --bs-btn-active-color: var(--bs-btn-color);
                 opacity: var(--bs-btn-disabled-opacity);
 
                 &:not(.active) {
                     background-color: var(--bs-secondary-bg);
                 }
             }
         }
-
-        .btn-outline-info {
-            --bs-btn-active-color: #fff;
-        }
     }
 }
 

src/BootstrapBlazor/Components/Radio/RadioList.razor

@@ -12,8 +12,16 @@
         <div class="@ButtonClassString" role="group">
             @foreach (var item in Items)
             {
-                <DynamicElement TagName="span" TriggerClick="!IsDisabled" OnClick="() => OnClick(item)" class="@GetButtonItemClassString(item)">
-                    @item.Text
+                <DynamicElement TagName="span" TriggerClick="!IsDisabled" OnClick="() => OnClick(item)"
+                                class="@GetButtonItemClassString(item)">
+                    @if (ItemTemplate != null)
+                    {
+                        @ItemTemplate(item)
+                    }
+                    else
+                    {
+                        @item.Text
+                    }
                 </DynamicElement>
             }
         </div>
@@ -24,7 +32,9 @@ else
     <div @attributes="@AdditionalAttributes" class="@ClassString" role="group">
         @foreach (var item in Items)
         {
-            <Radio TValue="SelectedItem" Value="@item" Color="@Color" GroupName="@GroupName" IsDisabled="@GetDisabledState(item)" ShowAfterLabel="true" ShowLabel="false" DisplayText="@item.Text" State="@CheckState(item)" OnClick="OnClick" ChildContent="GetChildContent(item)"></Radio>
+            <Radio TValue="SelectedItem" Value="@item" Color="@Color" GroupName="@GroupName" IsDisabled="@GetDisabledState(item)"
+                   ShowAfterLabel="true" ShowLabel="false" DisplayText="@item.Text" State="@CheckState(item)"
+                   OnClick="OnClick" ChildContent="GetChildContent(item)"></Radio>
         }
     </div>
 }

src/BootstrapBlazor/Components/Radio/RadioList.razor.cs

@@ -46,8 +46,9 @@ public partial class RadioList<TValue>
         .Build();
 
     private string? GetButtonItemClassString(SelectedItem item) => CssBuilder.Default("btn")
-        .AddClass($"btn-outline-{Color.ToDescriptionString()}")
-        .AddClass("active", CurrentValueAsString == item.Value)
+        .AddClass($"border-secondary", !ShowButtonBorderColor)
+        .AddClass($"border-{Color.ToDescriptionString()}", ShowButtonBorderColor)
+        .AddClass($"active bg-{Color.ToDescriptionString()}", CurrentValueAsString == item.Value)
         .Build();
 
     /// <summary>

src/BootstrapBlazor/Components/Radio/RadioList.razor.scss

@@ -31,25 +31,27 @@
 
         > .btn {
             white-space: nowrap;
+
+            &:not(:first-child) {
+                border-left-color: transparent !important;
+            }
+
+            &:not(:last-child) {
+                border-right-color: transparent !important;
+            }
         }
 
         .active {
             color: var(--bb-radio-group-item-active-color);
         }
 
         &.disabled > span {
-            --bs-btn-hover-color: var(--bs-btn-color);
-            --bs-btn-active-color: var(--bs-btn-color);
             opacity: var(--bs-btn-disabled-opacity);
 
             &:not(.active) {
                 background-color: var(--bs-secondary-bg);
             }
         }
-
-        .btn-outline-info {
-            --bs-btn-active-color: var(--bb-radio-group-item-active-color);
-        }
     }
 
     &.btn-group-vertical {

src/BootstrapBlazor/Components/Toolbar/Toolbar.razor

@@ -0,0 +1,8 @@
+@namespace BootstrapBlazor.Components
+@inherits IdComponentBase
+
+<div @attributes="AdditionalAttributes" class="@ClassString" role="toolbar" aria-label="toolbar" style="@StyleString">
+    <CascadingValue Value="this" IsFixed="true">
+        @ChildContent
+    </CascadingValue>
+</div>