doc(WinBox): add QA documentation

src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj

@@ -18,9 +18,6 @@
     <EmbeddedResource Include="Locales\en-US.json" />
     <EmbeddedResource Include="Locales\zh-CN.json" />
     <EmbeddedResource Include="topology.json" />
-  </ItemGroup>
-
-  <ItemGroup>
     <None Include="versionconfig.json" />
   </ItemGroup>
 
@@ -69,7 +66,7 @@
     <PackageReference Include="BootstrapBlazor.Topology" Version="8.0.9" />
     <PackageReference Include="BootstrapBlazor.VideoPlayer" Version="8.0.7-beta1" />
     <PackageReference Include="BootstrapBlazor.WebAPI" Version="8.0.5" />
-    <PackageReference Include="BootstrapBlazor.WinBox" Version="8.0.0-beta02" />
+    <PackageReference Include="BootstrapBlazor.WinBox" Version="8.0.0-beta03" />
     <PackageReference Include="Longbow.Logging" Version="8.0.0" />
     <PackageReference Include="Longbow.Tasks" Version="8.0.3" />
     <PackageReference Include="System.Drawing.Common" Version="8.0.8" />

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

@@ -9,13 +9,56 @@
 
 <p><code>WinBox</code> 组件封装的是 <a href="https://nextapps-de.github.io/winbox/?wt.mc_id=DT-MVP-5004174" target="_blank">WinBox.js</a></p>
 
+<p>组件使用介绍：</p>
+
+<p class="code-label">1. 引用包 <code>BootstrapBlazor.WinBox</code></p>
+
+<p class="code-label">2. 注入服务</p>
+<Pre>services.AddBootstrapBlazorWinBoxService();</Pre>
+
+<p class="code-label">3. 页面中使用服务</p>
+<Pre>[Inject]
+[NotNull]
+private WinBoxService? WinBoxService { get; set; }</Pre>
+
+<p class="code-label">4. 调用弹窗</p>
+<Pre>await WinBoxService.Show&lt;Counter&gt;("Test", option: option);</Pre>
+
 <DemoBlock Title="@Localizer["WinBoxNormalTitle"]"
            Introduction="@Localizer["WinBoxNormalIntro"]"
            Name="Normal">
-    <Button Text="Run" OnClickWithoutRender="OpenWinBox" ></Button>
+    <Button Text="Run" OnClickWithoutRender="OpenWinBox"></Button>
     <ConsoleLogger @ref="_logger"></ConsoleLogger>
 </DemoBlock>
 
-<WinBox></WinBox>
+<p class="code-label mt-3">常见问题</p>
+
+<GroupBox Title="更改标题背景色" class="mb-3">
+    <p>通过 <code>WinBoxOption</code> 参数 <code>Background</code> 设置</p>
+    <Pre>new WinBoxOption() { Background = "#000" }</Pre>
+
+    <p>通过 <code>WinBoxOption</code> 参数 <code>Class</code> 设置</p>
+    <Pre>new WinBoxOption() { Class = ".bb-win-box" }</Pre>
+    <Pre>.bb-win-box {
+    background: #000;
+}</Pre>
+
+    <p>通过样式变量实现</p>
+    <Pre>.winbox {
+    --bb-winbox-bg: var(--bb-primary-color) !important;
+}</Pre>
+</GroupBox>
+
+<GroupBox Title="更改边框" class="mb-3">
+    <p>通过 <code>WinBoxOption</code> 参数 <code>Border</code> 设置</p>
+    <Pre>new WinBoxOption() { Border = 3 }</Pre>
+</GroupBox>
+
+<GroupBox Title="模式弹窗" class="mb-3">
+    <p>通过 <code>WinBoxOption</code> 参数 <code>Modal</code> 设置</p>
+    <Pre>new WinBoxOption() { Modal = true }</Pre>
+</GroupBox>
+
+<p>更多参数信息可参考 <a href="https://github.com/dotnetcore/BootstrapBlazor/blob/main/src/Extensions/Components/BootstrapBlazor.WinBox/WinBoxOption.cs" target="_blank">WinBoxOption</a> 注释</p>
 
 <AttributeTable Items="@GetAttributes()" Title="WinBoxOption" />

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

@@ -17,7 +17,9 @@ public partial class WinBoxes
     private static WinBoxOption DefaultOptions => new()
     {
         Top = "50px",
-        Left = "50px"
+        Class = "bb-win-box",
+        Border = 2,
+        Background = "var(--bb-primary-color)"
     };
 
     private async Task OpenWinBox()

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -1233,6 +1233,7 @@ void AddNotice(DemoMenuItem item)
                 },
                 new()
                 {
+                    IsNew = true,
                     Text = Localizer["WinBox"],
                     Url = "win-box"
                 }

src/Extensions/Components/BootstrapBlazor.WinBox/BootstrapBlazor.WinBox.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.0.0-beta02</Version>
+    <Version>8.0.0-beta03</Version>
   </PropertyGroup>
 
   <PropertyGroup>
@@ -10,7 +10,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="BootstrapBlazor" Version="8.0.0" />
+    <PackageReference Include="BootstrapBlazor" Version="8.8.4-beta06" />
   </ItemGroup>
 
   <ItemGroup>

src/Extensions/Components/BootstrapBlazor.WinBox/Extensions/ComponentGenerator.cs

@@ -0,0 +1,12 @@
+// 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/
+
+using Microsoft.AspNetCore.Components;
+
+namespace BootstrapBlazor.Components;
+
+class ComponentGenerator : IRootComponentGenerator
+{
+    public RenderFragment Generator() => BootstrapDynamicComponent.CreateComponent<WinBox>().Render();
+}

src/Extensions/Components/BootstrapBlazor.WinBox/Extensions/ServiceCollectionExtensions.cs

@@ -19,6 +19,7 @@ public static class ServiceCollectionExtensions
     public static IServiceCollection AddBootstrapBlazorWinBoxService(this IServiceCollection services)
     {
         services.AddScoped<WinBoxService>();
+        services.AddScoped<IRootComponentGenerator, ComponentGenerator>();
         return services;
     }
 }

src/Extensions/Components/BootstrapBlazor.WinBox/wwwroot/css/winbox.bundle.css

@@ -1,6 +1,17 @@
 @import url('./winbox.min.css');
 
 .winbox {
-    --bb-winbox-bg: #0050ff;
+    --bb-winbox-body-padding: .5rem;
+    --bb-winbox-bg: #b5b5c3;
+    --bb-window-border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
     background: var(--bb-winbox-bg);
+    border-radius: var(--bb-window-border-radius);
+}
+
+    .winbox .bb-win-box-content {
+        padding: var(--bb-winbox-body-padding);
+    }
+
+[data-bs-theme='dark'] .winbox {
+    --bb-winbox-bg: #383b3f;
 }