feat(blazorui): complete BitHeader demo #7852 (#7853)

bitfoundation · Jun 25, 2024 · 260dedf · 260dedf
1 parent 68cc080
commit 260dedf
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 8 deletions.
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Header/BitHeader.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Header/BitHeader.razor.cs
@@ -2,6 +2,9 @@
 
 public partial class BitHeader
 {
+    private bool @fixed;
+    private int? height;
+
     /// <summary>
     /// Gets or sets the content to be rendered inside the BitHeader.
     /// </summary>
@@ -10,12 +13,34 @@ public partial class BitHeader
     /// <summary>
     /// Gets or sets the height of the BitHeader (in pixels).
     /// </summary>
-    [Parameter] public int? Height { get; set; } = 50;
+    [Parameter]
+    public int? Height
+    {
+        get => height;
+        set
+        {
+            if (height == value) return;
+
+            height = value;
+            StyleBuilder.Reset();
+        }
+    }
 
     /// <summary>
     /// Renders the header with a fixed position at the top of the page.
     /// </summary>
-    [Parameter] public bool Fixed { get; set; }
+    [Parameter]
+    public bool Fixed
+    {
+        get => @fixed;
+        set
+        {
+            if (@fixed == value) return;
+
+            @fixed = value;
+            ClassBuilder.Reset();
+        }
+    }
 
 
 

diff --git a/...rUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Header/BitHeaderDemo.razor b/...rUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Header/BitHeaderDemo.razor
@@ -9,9 +9,30 @@
                ComponentParameters="componentParameters">
     <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
         <ExamplePreview>
-            <div>
+            <div class="container">
                 <BitHeader>I'm a Header</BitHeader>
             </div>
         </ExamplePreview>
     </ComponentExampleBox>
+    <ComponentExampleBox Title="Usage" RazorCode="@example2RazorCode" Id="example2">
+        <ExamplePreview>
+            <div class="container">
+                <BitHeader Style="gap: 1rem;">
+                    <BitIconButton IconName="@BitIconName.GlobalNavButton" Title="Open Navigation"/>
+                    <BitTypography Variant="BitTypographyVariant.Caption">My Awesome App</BitTypography>
+                    <BitSpacer />
+                    <BitIconButton IconName="@BitIconName.Contact" Title="Sign in" />
+                    <BitMenuButton TItem="BitMenuButtonOption"
+                                   ChevronDownIcon="@BitIconName.More"
+                                   ButtonStyle="BitButtonStyle.Text"
+                                   title="See more"
+                                   Styles="@(new() { OperatorButton = "padding: 0.5rem; color: dodgerblue" })">
+                        <BitMenuButtonOption Text="Settings" IconName="@BitIconName.Settings" />
+                        <BitMenuButtonOption Text="About" IconName="@BitIconName.Info" />
+                        <BitMenuButtonOption Text="Feedback" IconName="@BitIconName.Feedback" />
+                    </BitMenuButton>
+                </BitHeader>
+            </div>
+        </ExamplePreview>
+    </ComponentExampleBox>
 </ComponentDemo>
diff --git a/.../Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Header/BitHeaderDemo.razor.cs b/.../Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Header/BitHeaderDemo.razor.cs
@@ -15,7 +15,7 @@ public partial class BitHeaderDemo
         {
             Name = "Height",
             Type = "int?",
-            DefaultValue = "50",
+            DefaultValue = "null",
             Description = "Gets or sets the height of the BitHeader (in pixels).",
         },
         new()
@@ -32,4 +32,20 @@ public partial class BitHeaderDemo
     private readonly string example1RazorCode = @"
 <BitHeader>I'm a Header</BitHeader>";
 
+    private readonly string example2RazorCode = @"
+<BitHeader Style=""gap: 1rem;"">
+    <BitIconButton IconName=""@BitIconName.GlobalNavButton"" Title=""Open Navigation""/>
+    <BitTypography Variant=""BitTypographyVariant.Caption"">My Awesome App</BitTypography>
+    <BitSpacer />
+    <BitIconButton IconName=""@BitIconName.Contact"" Title=""Sign in"" />
+    <BitMenuButton TItem=""BitMenuButtonOption""
+                   ChevronDownIcon=""@BitIconName.More""
+                   ButtonStyle=""BitButtonStyle.Text""
+                   title=""See more""
+                   Styles=""@(new() { OperatorButton = ""padding: 0.5rem; color: dodgerblue"" })"">
+        <BitMenuButtonOption Text=""Settings"" IconName=""@BitIconName.Settings"" />
+        <BitMenuButtonOption Text=""About"" IconName=""@BitIconName.Info"" />
+        <BitMenuButtonOption Text=""Feedback"" IconName=""@BitIconName.Feedback"" />
+    </BitMenuButton>
+</BitHeader>";
 }
diff --git a/...emo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Header/BitHeaderDemo.razor.scss b/...emo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Header/BitHeaderDemo.razor.scss
@@ -1,5 +1,5 @@
-::deep .custom-class {
-    padding: 0.5rem;
-    border: 1px solid red;
-    max-width: max-content;
+@import '../../../Styles/abstracts/_bit-css-variables.scss';
+
+.container {
+    border: 1px solid $bit-color-border-disabled;
 }