!2513 feat(#I4XDLI): add SkeletonTree component

* doc: 增加 SkeletonTree 示例
* feat: 增加 SkeletonTree 组件

src/BootstrapBlazor.Shared/Samples/Skeletons.razor

@@ -41,3 +41,7 @@
 <DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="Table">
     <SkeletonTable />
 </DemoBlock>
+
+<DemoBlock Title="@Localizer["BlockTreeTitle"]" Introduction="@Localizer["BlockTreeIntro"]" Name="Tree">
+    <SkeletonTree />
+</DemoBlock>

src/BootstrapBlazor/Components/Skeleton/Skeleton.css

@@ -16,12 +16,14 @@
         margin-bottom: 0.5rem;
     }
 
-.skeleton-content.round .skeleton-col {
+.skeleton-content.round .skeleton-col,
+.skeleton-content.round .tree-node {
     border-radius: var(--bs-border-radius);
 }
 
 .skeleton-content.active .skeleton-col,
-.skeleton-content.active .skeleton-avatar {
+.skeleton-content.active .skeleton-avatar,
+.skeleton-content.active .tree-node {
     background: -webkit-gradient(linear,left top,right top,color-stop(25%,#f2f2f2),color-stop(37%,#e6e6e6),color-stop(63%,#f2f2f2));
     background: linear-gradient(90deg,#f2f2f2 25%,#e6e6e6 37%,#f2f2f2 63%);
     background-size: 400% 100%;
@@ -95,7 +97,8 @@
             border-bottom: 2px solid var(--bs-secondary);
         }
 
-        .skeleton-table .skeleton-content .skeleton-row .skeleton-col {
+        .skeleton-table .skeleton-content .skeleton-row .skeleton-col,
+        .skeleton.tree .tree-item .tree-node {
             flex: 1;
             background-color: #e9ecef;
             margin: 5px;
@@ -127,3 +130,9 @@
     .skeleton-button:not(:last-child) {
         border-right: 1px solid #ddd;
     }
+
+.skeleton .tree-node {
+    background-color: #e9ecef;
+    height: 11px;
+    margin: 5px 0 5px 5px;
+}

src/BootstrapBlazor/Components/Skeleton/SkeletonTable.razor

@@ -1,7 +1,7 @@
 @namespace BootstrapBlazor.Components
 @inherits SkeletonBase
 
-<div @attributes="@AdditionalAttributes" class="skeleton">
+<div class="@TableClassString">
     @if (ShowToolbar)
     {
         <div class="skeleton-toolbar">

src/BootstrapBlazor/Components/Skeleton/SkeletonTable.razor.cs

@@ -28,4 +28,8 @@ public partial class SkeletonTable
     /// </summary>
     [Parameter]
     public bool ShowToolbar { get; set; } = true;
+
+    private string? TableClassString => CssBuilder.Default("skeleton")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
 }

src/BootstrapBlazor/Components/Skeleton/SkeletonTree.razor

@@ -1,4 +1,25 @@
 @namespace BootstrapBlazor.Components
 @inherits SkeletonBase
 
-<div>Loading</div>
+<div class="@TreeClassString" role="tree" tabindex="0">
+    <ul class="tree-root" role="tree">
+        <li role="treeitem" class="tree-item">
+            <div class="tree-content">
+                <i class="fa fa-spinner fa-spin fa-fw"></i>
+                <div class="tree-node">&nbsp;</div>
+            </div>
+        </li>
+        <li role="treeitem" class="tree-item">
+            <div class="tree-content">
+                <i class="fa fa-spinner fa-spin fa-fw"></i>
+                <div class="tree-node">&nbsp;</div>
+            </div>
+        </li>
+        <li role="treeitem" class="tree-item">
+            <div class="tree-content">
+                <i class="fa fa-spinner fa-spin fa-fw"></i>
+                <div class="tree-node">&nbsp;</div>
+            </div>
+        </li>
+    </ul>
+</div>

src/BootstrapBlazor/Components/Skeleton/SkeletonTree.razor.cs

@@ -0,0 +1,13 @@
+// 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/
+
+namespace BootstrapBlazor.Components;
+
+public partial class SkeletonTree
+{
+    private string? TreeClassString => CssBuilder.Default("skeleton tree")
+        .AddClass(ClassString)
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+}