Skeleton table example and APIs

Megabit · Oct 7, 2024 · 9cc4c8e · 9cc4c8e
1 parent 72ca5c4
commit 9cc4c8e
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 19 deletions.
diff --git a/Documentation/Blazorise.Docs/Models/Snippets.generated.cs b/Documentation/Blazorise.Docs/Models/Snippets.generated.cs
@@ -3798,6 +3798,8 @@ Task OnSelectedValueChanged( int value )
     <SkeletonItem ColumnSize=""ColumnSize.Is8"" />
 </Skeleton>";
 
+        public const string SkeletonTableExample = @"<SkeletonTable Rows=""5"" Columns=""4"" />";
+
         public const string SkeletonWaveAnimationExample = @"<Skeleton Animation=""SkeletonAnimation.Wave"">
     <SkeletonItem ColumnSize=""ColumnSize.Is7"" />
     <SkeletonItem ColumnSize=""ColumnSize.Is4"" />

diff --git a/...ntation/Blazorise.Docs/Pages/Docs/Components/Skeletons/Code/SkeletonTableExampleCode.html b/...ntation/Blazorise.Docs/Pages/Docs/Components/Skeletons/Code/SkeletonTableExampleCode.html
@@ -0,0 +1,5 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">SkeletonTable</span> <span class="htmlAttributeName">Rows</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">5</span><span class="quot">&quot;</span> <span class="htmlAttributeName">Columns</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">4</span><span class="quot">&quot;</span> <span class="htmlTagDelimiter">/&gt;</span>
+</pre></div>
+</div>
diff --git a/...tation/Blazorise.Docs/Pages/Docs/Components/Skeletons/Examples/SkeletonTableExample.razor b/...tation/Blazorise.Docs/Pages/Docs/Components/Skeletons/Examples/SkeletonTableExample.razor
@@ -0,0 +1,3 @@
+@namespace Blazorise.Docs.Docs.Examples
+
+<SkeletonTable Rows="5" Columns="4" />
diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Components/Skeletons/SkeletonApi.razor b/Documentation/Blazorise.Docs/Pages/Docs/Components/Skeletons/SkeletonApi.razor
@@ -16,4 +16,16 @@
     <DocsAttributesItem Name="ColumnSize" Type="IFluentColumn" Default="null">
         Gets or sets the column size configuration for the skeleton item.
     </DocsAttributesItem>
+</DocsAttributes>
+
+<DocsAttributes Title="SkeletonTable">
+    <DocsAttributesItem Name="Animation" Type="SkeletonAnimation" Default="Default">
+        Defined the animation style applied to the skeleton.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="Rows" Type="int" Default="3">
+        Specifies the number of rows to be rendered. Default is 3.
+    </DocsAttributesItem>
+    <DocsAttributesItem Name="Columns" Type="int" Default="5">
+        Specifies the number of columns to be rendered. Default is 5.
+    </DocsAttributesItem>
 </DocsAttributes>
diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Components/Skeletons/SkeletonPage.razor b/Documentation/Blazorise.Docs/Pages/Docs/Components/Skeletons/SkeletonPage.razor
@@ -48,6 +48,16 @@
     <DocsPageSectionSource Code="SkeletonWaveAnimationExample" />
 </DocsPageSection>
 
+<DocsPageSection>
+    <DocsPageSectionHeader Title="Table">
+        <Code>SkeletonTable</Code> allows you to scaffold a basic table structure by utilizing the <Code>Rows</Code> and <Code>Columns</Code> parameters to define the size of the table.
+    </DocsPageSectionHeader>
+    <DocsPageSectionContent Outlined FullWidth>
+        <SkeletonTableExample />
+    </DocsPageSectionContent>
+    <DocsPageSectionSource Code="SkeletonTableExample" />
+</DocsPageSection>
+
 <DocsPageSubtitle>
     Best Practices
 </DocsPageSubtitle>

diff --git a/Source/Blazorise/Components/Skeleton/SkeletonTable.razor b/Source/Blazorise/Components/Skeleton/SkeletonTable.razor
@@ -6,7 +6,7 @@
             @for ( int c = 0; c < Columns; ++c )
             {
                 <TableHeaderCell @key="@c">
-                    <Skeleton>
+                    <Skeleton Animation="@Animation">
                         <SkeletonItem Width="Blazorise.Width.Is100" />
                     </Skeleton>
                 </TableHeaderCell>
@@ -20,7 +20,7 @@
                 @for ( int c = 0; c < Columns; ++c )
                 {
                     <TableRowCell @key="@c">
-                        <Skeleton>
+                        <Skeleton Animation="@Animation">
                             <SkeletonItem Width="Blazorise.Width.Is75" />
                         </Skeleton>
                     </TableRowCell>

diff --git a/Source/Blazorise/Components/Skeleton/SkeletonTable.razor.cs b/Source/Blazorise/Components/Skeleton/SkeletonTable.razor.cs
@@ -6,29 +6,26 @@
 
 namespace Blazorise;
 
+/// <summary>
+/// A skeleton table that can be used to represent a skeleton of a table.
+/// </summary>
 public partial class SkeletonTable : BaseComponent
 {
-    #region Members
-
-    private IFluentColumn columnSize;
-
-    #endregion
-
-    #region Methods
-
-    /// <inheritdoc/>
-    protected override void BuildClasses( ClassBuilder builder )
-    {
-
-        base.BuildClasses( builder );
-    }
-
-    #endregion
-
     #region Properties
 
+    /// <summary>
+    /// Defined the animation style applied to the skeleton.
+    /// </summary>
+    [Parameter] public SkeletonAnimation Animation { get; set; }
+
+    /// <summary>
+    /// Specifies the number of rows to be rendered. Default is 3.
+    /// </summary>
     [Parameter] public int Rows { get; set; } = 3;
 
+    /// <summary>
+    /// Specifies the number of columns to be rendered. Default is 5.
+    /// </summary>
     [Parameter] public int Columns { get; set; } = 5;
 
     /// <summary>