feat(CheckboxList): add outline style (#6538)

* chore: 更新 CheckboxList 实现逻辑

* refactor: 微调样式

* refactor: 开发模式不使用后台服务

* Revert "chore: 更新 CheckboxList 实现逻辑"

This reverts commit 312fad3.

# Conflicts:
#	src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor.cs

* Revert "refactor: 微调样式"

This reverts commit 061ca85.

# Conflicts:
#	src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor.cs

* feat: 同步 bs 实现

* doc: 更新示例

* style: 微调样式

* style: 调整样式

Author: ArgoZhang

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

@@ -128,7 +128,7 @@
                 <BootstrapInput @bind-Value="@Model.Name" />
             </div>
             <div class="col-12 col-sm-6">
-                <CheckboxList @bind-Value="@SelectedItems" IsButton="true" Items="FooItems" />
+                <CheckboxList @bind-Value="@SelectedItems" IsButton="true" Items="FooItems" ShowLabel="true" DisplayText="Hobby" />
             </div>
         </div>
     </ValidateForm>

src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor

@@ -13,7 +13,8 @@
         <div class="@ButtonGroupClassString" role="group">
             @foreach (var item in Items)
             {
-                <DynamicElement TagName="span" TriggerClick="!IsDisabled" OnClick="() => OnClick(item)" class="@GetButtonItemClassString(item)">
+                <DynamicElement TagName="span" TriggerClick="!IsDisabled" OnClick="() => OnClick(item)"
+                                class="@GetButtonItemClassString(item)">
                     @item.Text
                 </DynamicElement>
             }

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

@@ -38,7 +38,8 @@ public partial class CheckboxList<TValue> : ValidateBase<TValue>
         .Build();
 
     private string? GetButtonItemClassString(SelectedItem item) => CssBuilder.Default("btn")
-        .AddClass($"active bg-{Color.ToDescriptionString()}", CurrentValueAsString.Split(',', StringSplitOptions.RemoveEmptyEntries).Contains(item.Value))
+        .AddClass($"btn-outline-{Color.ToDescriptionString()}")
+        .AddClass($"active", CurrentValueAsString.Split(',', StringSplitOptions.RemoveEmptyEntries).Contains(item.Value))
         .Build();
 
     /// <summary>

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

@@ -1,4 +1,4 @@
-.checkbox-list {
+.checkbox-list {
     --bb-checkbox-item-width: #{$bb-checkbox-item-width};
     min-height: var(--bb-height);
     height: auto;
@@ -38,7 +38,6 @@
     }
 
     .btn-group {
-        border: var(--bs-border-width) solid var(--bs-border-color);
         display: inline-flex;
         flex: 0 !important;
         flex-wrap: nowrap;
@@ -54,13 +53,19 @@
 
         &.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;
+        }
     }
 }