doc(DockView): update dockview sample code (#4390)

ArgoZhang · web-flow · commit 466db27580f9 · 2024-10-03T22:30:19.000+08:00
* doc: 更新卡片模式下样式

* doc: 更新示例
diff --git a/src/BootstrapBlazor.Server/Components/Pages/Online.razor.css b/src/BootstrapBlazor.Server/Components/Pages/Online.razor.css
@@ -10,3 +10,7 @@
         ::deep .table-container .table tr.active > td a {
             --bs-link-color-rgb: #fff;
         }
+
+::deep .table-striped .table-row.active {
+    background-color: var(--bb-table-row-active-bg);
+}
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/BaseDockView.cs b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/BaseDockView.cs
@@ -5,47 +5,41 @@
 namespace BootstrapBlazor.Server.Components.Samples.DockViews2;
 
 /// <summary>
-/// 
+/// DockView 基类
 /// </summary>
 public abstract class BaseDockView : ComponentBase
 {
     [Inject]
     [NotNull]
     private ICacheManager? CacheManager { get; set; }
 
-    /// <summary>
-    /// 
-    /// </summary>
     [Inject]
     [NotNull]
     private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
 
-    /// <summary>
-    /// 
-    /// </summary>
     [Inject]
     [NotNull]
     private MockDataTableDynamicService? DataTableDynamicService { get; set; }
 
     /// <summary>
-    /// 
+    /// 获得/设置 数据集合
     /// </summary>
     [NotNull]
     protected IEnumerable<Foo>? Items { get; set; }
 
     /// <summary>
-    /// 
+    /// 获得/设置 带层次结构的数据集合
     /// </summary>
     [NotNull]
     protected List<TreeFoo>? TreeItems { get; set; }
 
     /// <summary>
-    /// 
+    /// 获得/设置 <see cref="DataTableDynamicContext"/> 实例
     /// </summary>
     protected DataTableDynamicContext? DataTableDynamicContext { get; set; }
 
     /// <summary>
-    /// 
+    /// 获得 <see cref="DynamicObjectContext"/> 实例方法
     /// </summary>
     /// <param name="context"></param>
     /// <returns></returns>
@@ -71,7 +65,7 @@ protected override void OnInitialized()
     }
 
     /// <summary>
-    /// 
+    /// 增加方法
     /// </summary>
     /// <returns></returns>
     protected Task<Foo> OnAddAsync() => Task.FromResult(new Foo() { Id = GenerateId(), DateTime = DateTime.Now, Address = $"Custom address  {DateTime.Now.Second}" });
@@ -87,7 +81,7 @@ private int GenerateId()
     }
 
     /// <summary>
-    /// 
+    /// 转换方法
     /// </summary>
     /// <param name="items"></param>
     /// <returns></returns>
@@ -114,7 +108,7 @@ IEnumerable<TableTreeNode<TreeFoo>> BuildTreeNodes(IEnumerable<TreeFoo> items, i
     }
 
     /// <summary>
-    /// 
+    /// 展开方法
     /// </summary>
     /// <param name="foo"></param>
     /// <returns></returns>
@@ -127,12 +121,12 @@ protected Task<IEnumerable<TableTreeNode<TreeFoo>>> OnTreeExpand(TreeFoo foo) =>
     });
 
     /// <summary>
-    /// 
+    /// Tree 示例数据类
     /// </summary>
     public class TreeFoo : Foo
     {
         /// <summary>
-        /// 
+        /// 获得/设置 父级节点 Id
         /// </summary>
         public int ParentId { get; set; }
 
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewCol.razor b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewCol.razor
@@ -38,7 +38,7 @@
             </Table>
         </DockViewComponent>
         <DockViewComponent Key="tab3" Title="标签三" Height="33">
-            <Table TItem="TreeFoo" IsBordered="true" IsStriped="true" HeaderStyle="@TableHeaderStyle.Light"
+            <Table TItem="TreeFoo" IsBordered="true" IsStriped="true"
                    Items="@TreeItems" IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand" IsFixedHeader="true">
                 <TableColumns>
                     <TableColumn @bind-Field="@context.Name" Width="140" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewComplex.razor b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewComplex.razor
@@ -44,7 +44,7 @@
                 <FetchData></FetchData>
             </DockViewComponent>
             <DockViewComponent Key="tab4" Title="标签四">
-                <Table TItem="TreeFoo" IsBordered="true" IsStriped="true" HeaderStyle="@TableHeaderStyle.Light"
+                <Table TItem="TreeFoo" IsBordered="true" IsStriped="true"
                        Items="@TreeItems" IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand" IsFixedHeader="true">
                     <TableColumns>
                         <TableColumn @bind-Field="@context.Name" Width="140" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewGroup.razor b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewGroup.razor
@@ -39,7 +39,7 @@
                 </Table>
             </DockViewComponent>
             <DockViewComponent Key="tab3" Title="标签三">
-                <Table TItem="TreeFoo" IsBordered="true" IsStriped="true" HeaderStyle="@TableHeaderStyle.Light"
+                <Table TItem="TreeFoo" IsBordered="true" IsStriped="true"
                        Items="@TreeItems" IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand" IsFixedHeader="true">
                     <TableColumns>
                         <TableColumn @bind-Field="@context.Name" Width="140" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewNest.razor b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewNest.razor
@@ -43,7 +43,7 @@
             <DockViewV2 Name="DockViewInnerNest" Theme="_theme">
                 <DockViewContent Type="DockViewContentType.Column">
                     <DockViewComponent Key="tab31" Title="内嵌标签一">
-                        <Table TItem="TreeFoo" IsBordered="true" IsStriped="true" HeaderStyle="@TableHeaderStyle.Light"
+                        <Table TItem="TreeFoo" IsBordered="true" IsStriped="true"
                                Items="@TreeItems" IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand" IsFixedHeader="true">
                             <TableColumns>
                                 <TableColumn @bind-Field="@context.Name" Width="140" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewRow.razor b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewRow.razor
@@ -38,7 +38,7 @@
             </Table>
         </DockViewComponent>
         <DockViewComponent Key="tab3" Title="标签三" Width="14">
-            <Table TItem="TreeFoo" IsBordered="true" IsStriped="true" HeaderStyle="@TableHeaderStyle.Light"
+            <Table TItem="TreeFoo" IsBordered="true" IsStriped="true"
                    Items="@TreeItems" IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand" IsFixedHeader="true">
                 <TableColumns>
                     <TableColumn @bind-Field="@context.Name" Width="140" />
diff --git a/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewTitle.razor b/src/BootstrapBlazor.Server/Components/Samples/DockViews2/DockViewTitle.razor
@@ -43,7 +43,7 @@
             </ChildContent>
         </DockViewComponent>
         <DockViewComponent Key="tab3" Title="标签三" Height="33">
-            <Table TItem="TreeFoo" IsBordered="true" IsStriped="true" HeaderStyle="@TableHeaderStyle.Light"
+            <Table TItem="TreeFoo" IsBordered="true" IsStriped="true"
                    Items="@TreeItems" IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand" IsFixedHeader="true">
                 <TableColumns>
                     <TableColumn @bind-Field="@context.Name" Width="140" />

Original file line number	Diff line number	Diff line change
`@@ -10,3 +10,7 @@`
`10`	`10`	`::deep .table-container .table tr.active > td a {`
`11`	`11`	`--bs-link-color-rgb: #fff;`
`12`	`12`	`}`
	`13`	`+`
	`14`	`+::deep .table-striped .table-row.active {`
	`15`	`+ background-color: var(--bb-table-row-active-bg);`
	`16`	`+}`