From b47538dce803798eb4124ef30ed22d73e8f8b815 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Wed, 18 Dec 2024 15:17:53 +0330 Subject: [PATCH 1/8] add BitProLayout component #9502 --- .../Components/ProLayout/BitProLayout.razor | 21 ++++ .../ProLayout/BitProLayout.razor.cs | 33 +++++++ .../Components/ProLayout/BitProLayout.scss | 75 +++++++++++++++ .../ProLayout/BitProLayoutClassStyles.cs | 39 ++++++++ .../Styles/components.scss | 1 + .../Components/ComponentExampleBox.razor | 53 ++++++----- .../Extras/ProLayout/BitProLayoutDemo.razor | 24 +++++ .../ProLayout/BitProLayoutDemo.razor.cs | 95 +++++++++++++++++++ .../ProLayout/BitProLayoutDemo.razor.scss | 0 .../Pages/Home/ComponentsSection.razor | 3 + .../Shared/NavMenu.razor.cs | 1 + 11 files changed, 320 insertions(+), 25 deletions(-) create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayoutClassStyles.cs create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor.cs create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor.scss diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor new file mode 100644 index 0000000000..e970bb729a --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor @@ -0,0 +1,21 @@ +@namespace Bit.BlazorUI +@inherits BitComponentBase + +
+
+
+
+
+ @ChildContent +
+
+
+
+
\ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs new file mode 100644 index 0000000000..c25dc11fa7 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs @@ -0,0 +1,33 @@ +namespace Bit.BlazorUI; + +public partial class BitProLayout : BitComponentBase +{ + /// + /// The content of the layout. + /// + [Parameter] public RenderFragment? ChildContent { get; set; } + + /// + /// Custom CSS classes for different parts of the layout. + /// + [Parameter] public BitProLayoutClassStyles? Classes { get; set; } + + /// + /// Custom CSS styles for different parts of the layout. + /// + [Parameter] public BitProLayoutClassStyles? Styles { get; set; } + + + + protected override string RootElementClass => "bit-ply"; + + protected override void RegisterCssClasses() + { + ClassBuilder.Register(() => Classes?.Root); + } + + protected override void RegisterCssStyles() + { + StyleBuilder.Register(() => Styles?.Root); + } +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss new file mode 100644 index 0000000000..9cdb215013 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss @@ -0,0 +1,75 @@ +@import '../../../Bit.BlazorUI/Styles/functions.scss'; + +:root { + --bit-ply-inset-top: env(safe-area-inset-top); + --bit-ply-inset-left: env(safe-area-inset-left); + --bit-ply-inset-right: env(safe-area-inset-right); + --bit-ply-inset-bottom: env(safe-area-inset-bottom); + //-- + --bit-ply-width-vw: calc(100vw - var(--bit-ply-inset-left) - var(--bit-ply-inset-right)); + --bit-ply-height-vh: calc(100vh - var(--bit-ply-inset-top) - var(--bit-ply-inset-bottom)); + --bit-ply-width-per: calc(100% - var(--bit-ply-inset-left) - var(--bit-ply-inset-right)); + --bit-ply-height-per: calc(100% - var(--bit-ply-inset-top) - var(--bit-ply-inset-bottom)); + --bit-ply-width: calc(var(--win-width) - var(--bit-ply-inset-left) - var(--bit-ply-inset-right)); + --bit-ply-height: calc(var(--win-height) - var(--bit-ply-inset-top) - var(--bit-ply-inset-bottom)); + //-- + --bit-ply-inset-inline-start: var(--bit-ply-inset-left); + --bit-ply-inset-inline-end: var(--bit-ply-inset-right); + + [dir="rtl"] { + --bit-ply-inset-inline-start: var(--bit-ply-inset-right); + --bit-ply-inset-inline-end: var(--bit-ply-inset-left); + } +} + +.bit-ply { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + background-color: $clr-bg-pri; +} + +.bit-ply-top { + width: 100%; + z-index: 999999; + height: var(--bit-ply-inset-top); + background-color: $clr-bg-pri; +} + +.bit-ply-bottom { + width: 100%; + z-index: 999999; + height: var(--bit-ply-inset-bottom); + background-color: $clr-bg-pri; +} + +.bit-ply-center { + width: 100%; + display: flex; + height: calc(100% - var(--bit-ply-inset-top) - var(--bit-ply-inset-bottom)); +} + +.bit-ply-main { + height: 100%; + display: flex; + overflow: auto; + position: relative; + scroll-behavior: smooth; + overscroll-behavior: none; + width: calc(100% - var(--bit-ply-inset-left) - var(--bit-ply-inset-right)); +} + +.bit-ply-left { + height: 100%; + z-index: 999999; + width: var(--bit-ply-inset-left); + background-color: $clr-bg-pri; +} + +.bit-ply-right { + height: 100%; + z-index: 999999; + width: var(--bit-ply-inset-right); + background-color: $clr-bg-pri; +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayoutClassStyles.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayoutClassStyles.cs new file mode 100644 index 0000000000..6793afc5ca --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayoutClassStyles.cs @@ -0,0 +1,39 @@ +namespace Bit.BlazorUI; + +public class BitProLayoutClassStyles +{ + /// + /// Custom CSS classes/styles for the root of the BitProLayout. + /// + public string? Root { get; set; } + + /// + /// Custom CSS classes/styles for the top area of the BitProLayout. + /// + public string? Top { get; set; } + + /// + /// Custom CSS classes/styles for the center area of the BitProLayout. + /// + public string? Center { get; set; } + + /// + /// Custom CSS classes/styles for the left area of the BitProLayout. + /// + public string? Left { get; set; } + + /// + /// Custom CSS classes/styles for the main area of the BitProLayout. + /// + public string? Main { get; set; } + + /// + /// Custom CSS classes/styles for the right area of the BitProLayout. + /// + public string? Right { get; set; } + + /// + /// Custom CSS classes/styles for the bottom area of the BitProLayout. + /// + public string? Bottom { get; set; } +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss index ca46bd9aef..7dcba98b06 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/components.scss @@ -2,3 +2,4 @@ @import "../Components/DataGrid/Pagination/BitDataGridPaginator.scss"; @import "../Components/PdfReader/BitPdfReader.scss"; @import "../Components/ProPanel/BitProPanel.scss"; +@import "../Components/ProLayout/BitProLayout.scss"; diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor index dd473865ca..4b2cd6a862 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor @@ -3,25 +3,28 @@
@Title -
- - @(showCode ? "Hide code" : "Show code") - - - @if (isLinkCopied) - { - @copyLinkMessage - } - -
+ @if (RazorCode is not null || CsharpCode is not null) + { +
+ + @(showCode ? "Hide code" : "Show code") + + + @if (isLinkCopied) + { + @copyLinkMessage + } + +
+ }
@@ -39,16 +42,16 @@ 
-                @RazorCode.Trim()
+            @RazorCode.Trim()
 
                 @if (CsharpCode.HasValue())
                 {
-                    
-@code {
-     @CsharpCode.Trim().Replace("\n", "\n     ")
-}
+                
+        @code {
+                        @CsharpCode.Trim().Replace("\n", "\n     ")
+        }
                 }
-
+ }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor new file mode 100644 index 0000000000..c8f12f1d69 --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor @@ -0,0 +1,24 @@ +@page "/components/prolayout" + +@inherits AppComponentBase + + + + + + +
Since this component is a base layout container, it is not possible to show its capabilities in a demo sample here.
+
+ You can always check our Boilerplate project template samples + (AdminPanel & Todo) + to see the BitProLayout in action. +
+ + + \ No newline at end of file diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor.cs new file mode 100644 index 0000000000..b82cff1158 --- /dev/null +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor.cs @@ -0,0 +1,95 @@ +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.ProLayout; + +public partial class BitProLayoutDemo +{ + private readonly List componentParameters = + [ + new() + { + Name = "ChildContent", + Type = "RenderFragment?", + DefaultValue = "null", + Description = "The content of the layout.", + }, + new() + { + Name = "Classes", + Type = "BitProLayoutClassStyles?", + DefaultValue = "null", + Description = "Custom CSS classes for different parts of the layout.", + LinkType = LinkType.Link, + Href = "#class-styles" + }, + new() + { + Name = "Styles", + Type = "BitProLayoutClassStyles?", + DefaultValue = "null", + Description = "Custom CSS styles for different parts of the layout.", + LinkType = LinkType.Link, + Href = "#class-styles" + }, + ]; + + private readonly List componentSubClasses = + [ + new() + { + Id = "class-styles", + Title = "BitProLayoutClassStyles", + Parameters= + [ + new() + { + Name = "Root", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the root of the BitProLayout.", + }, + new() + { + Name = "Top", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the top area of the BitProLayout.", + }, + new() + { + Name = "Center", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the top center of the BitProLayout.", + }, + new() + { + Name = "Left", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the top left of the BitProLayout.", + }, + new() + { + Name = "Main", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the main area of the BitProLayout.", + }, + new() + { + Name = "Right", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the right area of the BitProLayout.", + }, + new() + { + Name = "Bottom", + Type = "string?", + DefaultValue = "null", + Description = "Custom CSS classes/styles for the bottom area of the BitProLayout.", + }, + ] + } + ]; + +} diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor index b3e28e6a15..79f9ec0e34 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/ComponentsSection.razor @@ -253,6 +253,9 @@ PdfReader + + ProLayout + ProPanel diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs index 84b6f10f89..88e59091ab 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Shared/NavMenu.razor.cs @@ -156,6 +156,7 @@ public partial class NavMenu : IDisposable new() { Text = "DataGrid", Url = "/components/datagrid", AdditionalUrls = ["/components/data-grid"] }, new() { Text = "Chart", Url = "/components/chart" }, new() { Text = "PdfReader", Url = "/components/pdfreader" }, + new() { Text = "ProLayout", Url = "/components/prolayout" }, new() { Text = "ProPanel", Url = "/components/propanel" }, new() { From 540025fde1b0bb605fee1ff59e02bb9fde9427cb Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Wed, 18 Dec 2024 15:24:20 +0330 Subject: [PATCH 2/8] fix code samples formatting --- .../Components/ComponentExampleBox.razor | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor index 4b2cd6a862..f8a69fc59a 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentExampleBox.razor @@ -42,16 +42,20 @@ 
-            @RazorCode.Trim()
+                
+                
+                    @RazorCode?.Trim()
+                
 
                 @if (CsharpCode.HasValue())
                 {
-                
-        @code {
-                        @CsharpCode.Trim().Replace("\n", "\n     ")
-        }
+                    
+@code {
+    @CsharpCode?.Trim().Replace("\n", "\n     ")
+}
+                    
                 }
-
+ }
From 0a0755294d0e87eee6cab18b363c771da2a6affb Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Thu, 19 Dec 2024 09:42:10 +0330 Subject: [PATCH 3/8] add extra general.scss --- .../Components/ProLayout/BitProLayout.scss | 34 ++++--------------- .../Styles/bit.blazorui.extras.scss | 3 +- .../Bit.BlazorUI.Extras/Styles/general.scss | 21 ++++++++++++ 3 files changed, 29 insertions(+), 29 deletions(-) create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss index 9cdb215013..27d8d661e1 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss @@ -1,27 +1,5 @@ @import '../../../Bit.BlazorUI/Styles/functions.scss'; -:root { - --bit-ply-inset-top: env(safe-area-inset-top); - --bit-ply-inset-left: env(safe-area-inset-left); - --bit-ply-inset-right: env(safe-area-inset-right); - --bit-ply-inset-bottom: env(safe-area-inset-bottom); - //-- - --bit-ply-width-vw: calc(100vw - var(--bit-ply-inset-left) - var(--bit-ply-inset-right)); - --bit-ply-height-vh: calc(100vh - var(--bit-ply-inset-top) - var(--bit-ply-inset-bottom)); - --bit-ply-width-per: calc(100% - var(--bit-ply-inset-left) - var(--bit-ply-inset-right)); - --bit-ply-height-per: calc(100% - var(--bit-ply-inset-top) - var(--bit-ply-inset-bottom)); - --bit-ply-width: calc(var(--win-width) - var(--bit-ply-inset-left) - var(--bit-ply-inset-right)); - --bit-ply-height: calc(var(--win-height) - var(--bit-ply-inset-top) - var(--bit-ply-inset-bottom)); - //-- - --bit-ply-inset-inline-start: var(--bit-ply-inset-left); - --bit-ply-inset-inline-end: var(--bit-ply-inset-right); - - [dir="rtl"] { - --bit-ply-inset-inline-start: var(--bit-ply-inset-right); - --bit-ply-inset-inline-end: var(--bit-ply-inset-left); - } -} - .bit-ply { width: 100%; height: 100%; @@ -33,21 +11,21 @@ .bit-ply-top { width: 100%; z-index: 999999; - height: var(--bit-ply-inset-top); + height: var(--bit-env-inset-top); background-color: $clr-bg-pri; } .bit-ply-bottom { width: 100%; z-index: 999999; - height: var(--bit-ply-inset-bottom); + height: var(--bit-env-inset-bottom); background-color: $clr-bg-pri; } .bit-ply-center { width: 100%; display: flex; - height: calc(100% - var(--bit-ply-inset-top) - var(--bit-ply-inset-bottom)); + height: calc(100% - var(--bit-env-inset-top) - var(--bit-env-inset-bottom)); } .bit-ply-main { @@ -57,19 +35,19 @@ position: relative; scroll-behavior: smooth; overscroll-behavior: none; - width: calc(100% - var(--bit-ply-inset-left) - var(--bit-ply-inset-right)); + width: calc(100% - var(--bit-env-inset-left) - var(--bit-env-inset-right)); } .bit-ply-left { height: 100%; z-index: 999999; - width: var(--bit-ply-inset-left); + width: var(--bit-env-inset-left); background-color: $clr-bg-pri; } .bit-ply-right { height: 100%; z-index: 999999; - width: var(--bit-ply-inset-right); + width: var(--bit-env-inset-right); background-color: $clr-bg-pri; } diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss index 4d58f1782c..eb02b8b603 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/bit.blazorui.extras.scss @@ -1,2 +1,3 @@ -@import "components.scss"; +@import "general.scss"; +@import "components.scss"; @import "fabric.mdl2.bit.blazoui.extras.scss"; diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss new file mode 100644 index 0000000000..aadd719d1e --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss @@ -0,0 +1,21 @@ +:root { + --bit-env-inset-top: env(safe-area-inset-top); + --bit-env-inset-left: env(safe-area-inset-left); + --bit-env-inset-right: env(safe-area-inset-right); + --bit-env-inset-bottom: env(safe-area-inset-bottom); + //-- + --bit-env-width-vw: calc(100vw - var(--bit-env-inset-left) - var(--bit-env-inset-right)); + --bit-env-height-vh: calc(100vh - var(--bit-env-inset-top) - var(--bit-env-inset-bottom)); + --bit-env-width-per: calc(100% - var(--bit-env-inset-left) - var(--bit-env-inset-right)); + --bit-env-height-per: calc(100% - var(--bit-env-inset-top) - var(--bit-env-inset-bottom)); + --bit-env-width: calc(var(--win-width) - var(--bit-env-inset-left) - var(--bit-env-inset-right)); + --bit-env-height: calc(var(--win-height) - var(--bit-env-inset-top) - var(--bit-env-inset-bottom)); + //-- + --bit-env-inset-inline-start: var(--bit-env-inset-left); + --bit-env-inset-inline-end: var(--bit-env-inset-right); + + [dir="rtl"] { + --bit-env-inset-inline-start: var(--bit-env-inset-right); + --bit-env-inset-inline-end: var(--bit-env-inset-left); + } +} From d7acaf679a97325534527211837416ef5eea2522 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Sat, 21 Dec 2024 15:06:56 +0330 Subject: [PATCH 4/8] add cascading value support --- .../Components/ProLayout/BitCascadingValue.cs | 23 ++++++++ .../ProLayout/BitCascadingValueProvider.cs | 53 +++++++++++++++++++ .../Components/ProLayout/BitProLayout.razor | 6 ++- .../ProLayout/BitProLayout.razor.cs | 5 ++ .../Components/ProLayout/BitProLayout.scss | 15 +++--- .../Styles/extra-variables.scss | 14 +++++ .../Bit.BlazorUI.Extras/Styles/general.scss | 4 +- 7 files changed, 109 insertions(+), 11 deletions(-) create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValue.cs create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-variables.scss diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValue.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValue.cs new file mode 100644 index 0000000000..dbf52b8b35 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValue.cs @@ -0,0 +1,23 @@ +namespace Bit.BlazorUI; + +public class BitCascadingValue +{ + public string? Name { get; set; } + public object? Value { get; set; } + + public BitCascadingValue() { } + + public BitCascadingValue(object? value, string? name = null) + { + Name = name; + Value = value; + } + + public static implicit operator BitCascadingValue(int value) => new(value); + public static implicit operator BitCascadingValue(int? value) => new(value); + public static implicit operator BitCascadingValue(bool value) => new(value); + public static implicit operator BitCascadingValue(bool? value) => new(value); + public static implicit operator BitCascadingValue(string value) => new(value); + public static implicit operator BitCascadingValue(BitDir? value) => new(value); + public static implicit operator BitCascadingValue(RouteData value) => new(value); +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs new file mode 100644 index 0000000000..a557fef66b --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs @@ -0,0 +1,53 @@ +using System.Diagnostics.CodeAnalysis; + +namespace Bit.BlazorUI; + +public class BitCascadingValueProvider : ComponentBase +{ + [DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)] + private Type _cascadingValueType = typeof(CascadingValue<>); + + [Parameter] public RenderFragment? ChildContent { get; set; } + [Parameter] public IEnumerable Values { get; set; } = []; + + [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(BitCascadingValue))] + protected override void BuildRenderTree(RenderTreeBuilder builder) + { + var seq = 0; + RenderFragment? rf = ChildContent; + + foreach (var value in Values) + { + if (value.Value is null) continue; + + var r = rf; + var s = seq; + var v = value; + + rf = b => { CreateCascadingValue(b, s, v.Name, v.Value, r); }; + + seq += string.IsNullOrEmpty(v.Name) ? 3 : 4; + } + + builder.AddContent(seq, rf); + } + + + private void CreateCascadingValue(RenderTreeBuilder builder, + int seq, + string? name, + object value, + RenderFragment? childContent) + { +#pragma warning disable IL2055 // Either the type on which the MakeGenericType is called can't be statically determined, or the type parameters to be used for generic arguments can't be statically determined. + builder.OpenComponent(seq, _cascadingValueType.MakeGenericType(value.GetType())); +#pragma warning restore IL2055 // Either the type on which the MakeGenericType is called can't be statically determined, or the type parameters to be used for generic arguments can't be statically determined. + if (string.IsNullOrEmpty(name) is false) + { + builder.AddComponentParameter(++seq, "Name", name); + } + builder.AddComponentParameter(++seq, "Value", value); + builder.AddComponentParameter(++seq, "ChildContent", childContent); + builder.CloseComponent(); + } +} diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor index e970bb729a..6851c614ef 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor @@ -9,11 +9,13 @@ dir="@Dir?.ToString().ToLower()">
- @ChildContent + + @ChildContent +
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs index c25dc11fa7..d169ef2062 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs @@ -2,6 +2,11 @@ public partial class BitProLayout : BitComponentBase { + /// + /// The cascading values to be provided for the children of the layout. + /// + [Parameter] public IEnumerable Values { get; set; } = []; + /// /// The content of the layout. /// diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss index 27d8d661e1..81b2fa70d4 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.scss @@ -1,4 +1,5 @@ -@import '../../../Bit.BlazorUI/Styles/functions.scss'; +@import '../../Styles/extra-variables.scss'; +@import '../../../Bit.BlazorUI/Styles/functions.scss'; .bit-ply { width: 100%; @@ -11,21 +12,21 @@ .bit-ply-top { width: 100%; z-index: 999999; - height: var(--bit-env-inset-top); + height: $bit-env-inset-top; background-color: $clr-bg-pri; } .bit-ply-bottom { width: 100%; z-index: 999999; - height: var(--bit-env-inset-bottom); + height: $bit-env-inset-bottom; background-color: $clr-bg-pri; } .bit-ply-center { width: 100%; display: flex; - height: calc(100% - var(--bit-env-inset-top) - var(--bit-env-inset-bottom)); + height: calc(100% - $bit-env-inset-top - $bit-env-inset-bottom); } .bit-ply-main { @@ -35,19 +36,19 @@ position: relative; scroll-behavior: smooth; overscroll-behavior: none; - width: calc(100% - var(--bit-env-inset-left) - var(--bit-env-inset-right)); + width: calc(100% - $bit-env-inset-left - $bit-env-inset-right); } .bit-ply-left { height: 100%; z-index: 999999; - width: var(--bit-env-inset-left); + width: $bit-env-inset-left; background-color: $clr-bg-pri; } .bit-ply-right { height: 100%; z-index: 999999; - width: var(--bit-env-inset-right); + width: $bit-env-inset-right; background-color: $clr-bg-pri; } diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-variables.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-variables.scss new file mode 100644 index 0000000000..aed5458274 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-variables.scss @@ -0,0 +1,14 @@ +$bit-env-inset-top: var(--bit-env-inset-top); +$bit-env-inset-left: var(--bit-env-inset-left); +$bit-env-inset-right: var(--bit-env-inset-right); +$bit-env-inset-bottom: var(--bit-env-inset-bottom); +//-- +$bit-env-width-vw: var(--bit-env-width-vw); +$bit-env-height-vh: var(--bit-env-height-vh); +$bit-env-width-percent: var(--bit-env-width-per); +$bit-env-height-percent: var(--bit-env-height-per); +$bit-env-width-available: var(--bit-env-width-avl); +$bit-env-height-available: var(--bit-env-height-avl); +//-- +$bit-env-inset-inline-start: var(--bit-env-inset-inline-start); +$bit-env-inset-inline-end: var(--bit-env-inset-inline-end); diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss index aadd719d1e..3b8f0683f0 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss @@ -8,8 +8,8 @@ --bit-env-height-vh: calc(100vh - var(--bit-env-inset-top) - var(--bit-env-inset-bottom)); --bit-env-width-per: calc(100% - var(--bit-env-inset-left) - var(--bit-env-inset-right)); --bit-env-height-per: calc(100% - var(--bit-env-inset-top) - var(--bit-env-inset-bottom)); - --bit-env-width: calc(var(--win-width) - var(--bit-env-inset-left) - var(--bit-env-inset-right)); - --bit-env-height: calc(var(--win-height) - var(--bit-env-inset-top) - var(--bit-env-inset-bottom)); + --bit-env-width-avl: calc(var(--win-width) - var(--bit-env-inset-left) - var(--bit-env-inset-right)); + --bit-env-height-avl: calc(var(--win-height) - var(--bit-env-inset-top) - var(--bit-env-inset-bottom)); //-- --bit-env-inset-inline-start: var(--bit-env-inset-left); --bit-env-inset-inline-end: var(--bit-env-inset-right); From 76d2fa677ceb8301d82767f6db3e26eb54e3af67 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Sat, 21 Dec 2024 15:32:05 +0330 Subject: [PATCH 5/8] add window size css variables --- src/BlazorUI/Bit.BlazorUI.Extras/Scripts/general.ts | 4 ++++ .../Bit.BlazorUI.Extras/Styles/extra-variables.scss | 3 +++ src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss | 12 ++++++------ 3 files changed, 13 insertions(+), 6 deletions(-) create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Scripts/general.ts diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Scripts/general.ts b/src/BlazorUI/Bit.BlazorUI.Extras/Scripts/general.ts new file mode 100644 index 0000000000..d19e62953b --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Scripts/general.ts @@ -0,0 +1,4 @@ +window.addEventListener('load', () => { + document.documentElement.style.setProperty('--bit-env-win-width', `${window.innerWidth}px`); + document.documentElement.style.setProperty('--bit-env-win-height', `${window.innerHeight}px`); +}); \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-variables.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-variables.scss index aed5458274..8f09e8a4e9 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-variables.scss +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/extra-variables.scss @@ -12,3 +12,6 @@ $bit-env-height-available: var(--bit-env-height-avl); //-- $bit-env-inset-inline-start: var(--bit-env-inset-inline-start); $bit-env-inset-inline-end: var(--bit-env-inset-inline-end); +//-- +$bit-env-window-width: var(--bit-env-win-width); +$bit-env-window-height: var(--bit-env-win-height); diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss index 3b8f0683f0..d77e2b499d 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Styles/general.scss @@ -1,15 +1,15 @@ :root { - --bit-env-inset-top: env(safe-area-inset-top); - --bit-env-inset-left: env(safe-area-inset-left); - --bit-env-inset-right: env(safe-area-inset-right); - --bit-env-inset-bottom: env(safe-area-inset-bottom); + --bit-env-inset-top: env(safe-area-inset-top, 0px); + --bit-env-inset-left: env(safe-area-inset-left, 0px); + --bit-env-inset-right: env(safe-area-inset-right, 0px); + --bit-env-inset-bottom: env(safe-area-inset-bottom, 0px); //-- --bit-env-width-vw: calc(100vw - var(--bit-env-inset-left) - var(--bit-env-inset-right)); --bit-env-height-vh: calc(100vh - var(--bit-env-inset-top) - var(--bit-env-inset-bottom)); --bit-env-width-per: calc(100% - var(--bit-env-inset-left) - var(--bit-env-inset-right)); --bit-env-height-per: calc(100% - var(--bit-env-inset-top) - var(--bit-env-inset-bottom)); - --bit-env-width-avl: calc(var(--win-width) - var(--bit-env-inset-left) - var(--bit-env-inset-right)); - --bit-env-height-avl: calc(var(--win-height) - var(--bit-env-inset-top) - var(--bit-env-inset-bottom)); + --bit-env-width-avl: calc(var(--bit-env-win-width) - var(--bit-env-inset-left) - var(--bit-env-inset-right)); + --bit-env-height-avl: calc(var(--bit-env-win-height) - var(--bit-env-inset-top) - var(--bit-env-inset-bottom)); //-- --bit-env-inset-inline-start: var(--bit-env-inset-left); --bit-env-inset-inline-end: var(--bit-env-inset-right); From 70385d6e110fdbf9b449c99002351f8d33ef262b Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Sun, 22 Dec 2024 09:00:03 +0330 Subject: [PATCH 6/8] add missing stuff --- .../Components/ProLayout/BitCascadingValue.cs | 27 ++++++++++-- .../ProLayout/BitCascadingValueProvider.cs | 28 ++++++++++--- .../Components/ProLayout/BitProLayout.razor | 2 +- .../ProLayout/BitProLayout.razor.cs | 2 +- .../ProLayout/BitProLayoutDemo.razor.cs | 42 ++++++++++++++++++- 5 files changed, 88 insertions(+), 13 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValue.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValue.cs index dbf52b8b35..16f09199d0 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValue.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValue.cs @@ -1,18 +1,39 @@ namespace Bit.BlazorUI; +/// +/// The cascading value to be provided using the component. +/// public class BitCascadingValue { + /// + /// The optional name of the cascading value. + /// public string? Name { get; set; } + + /// + /// The value to be provided. + /// public object? Value { get; set; } - public BitCascadingValue() { } + /// + /// If true, indicates that will not change. + /// + public bool IsFixed { get; set; } + - public BitCascadingValue(object? value, string? name = null) + + public BitCascadingValue() { } + public BitCascadingValue(object? value, string? name = null) : this(value, name, false) { } + public BitCascadingValue(object? value, bool isFixed) : this(value, null, isFixed) { } + public BitCascadingValue(object? value, string? name, bool isFixed) { - Name = name; Value = value; + Name = name; + IsFixed = isFixed; } + + public static implicit operator BitCascadingValue(int value) => new(value); public static implicit operator BitCascadingValue(int? value) => new(value); public static implicit operator BitCascadingValue(bool value) => new(value); diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs index a557fef66b..c6fd45a44c 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs @@ -2,13 +2,27 @@ namespace Bit.BlazorUI; +/// +/// A component that provides a list of cascading values to all descendant components. +/// public class BitCascadingValueProvider : ComponentBase { + /// + /// The content to which the values should be provided. + /// + [Parameter] public RenderFragment? ChildContent { get; set; } + + /// + /// The cascading values to be provided for the children. + /// + [Parameter] public IEnumerable? Values { get; set; } + + + [DynamicallyAccessedMembers(DynamicallyAccessedMemberTypes.All)] private Type _cascadingValueType = typeof(CascadingValue<>); - [Parameter] public RenderFragment? ChildContent { get; set; } - [Parameter] public IEnumerable Values { get; set; } = []; + [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(BitCascadingValue))] protected override void BuildRenderTree(RenderTreeBuilder builder) @@ -16,7 +30,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder) var seq = 0; RenderFragment? rf = ChildContent; - foreach (var value in Values) + foreach (var value in Values ?? []) { if (value.Value is null) continue; @@ -24,9 +38,9 @@ protected override void BuildRenderTree(RenderTreeBuilder builder) var s = seq; var v = value; - rf = b => { CreateCascadingValue(b, s, v.Name, v.Value, r); }; + rf = b => { CreateCascadingValue(b, s, v.Name, v.Value, v.IsFixed, r); }; - seq += string.IsNullOrEmpty(v.Name) ? 3 : 4; + seq += v.Name.HasValue() ? 4 : 3; } builder.AddContent(seq, rf); @@ -36,7 +50,8 @@ protected override void BuildRenderTree(RenderTreeBuilder builder) private void CreateCascadingValue(RenderTreeBuilder builder, int seq, string? name, - object value, + object? value, + bool isFixed, RenderFragment? childContent) { #pragma warning disable IL2055 // Either the type on which the MakeGenericType is called can't be statically determined, or the type parameters to be used for generic arguments can't be statically determined. @@ -47,6 +62,7 @@ private void CreateCascadingValue(RenderTreeBuilder builder, builder.AddComponentParameter(++seq, "Name", name); } builder.AddComponentParameter(++seq, "Value", value); + builder.AddComponentParameter(++seq, "IsFixed", isFixed); builder.AddComponentParameter(++seq, "ChildContent", childContent); builder.CloseComponent(); } diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor index 6851c614ef..0b25c15ac0 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor @@ -13,7 +13,7 @@ dir="@Dir?.ToString().ToLower()">
- + @ChildContent
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs index d169ef2062..af75a24d4a 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitProLayout.razor.cs @@ -5,7 +5,7 @@ public partial class BitProLayout : BitComponentBase /// /// The cascading values to be provided for the children of the layout. /// - [Parameter] public IEnumerable Values { get; set; } = []; + [Parameter] public IEnumerable? CascadingValues { get; set; } /// /// The content of the layout. diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor.cs index b82cff1158..34773f841c 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor.cs @@ -4,6 +4,15 @@ public partial class BitProLayoutDemo { private readonly List componentParameters = [ + new() + { + Name = "CascadingValues", + Type = "IEnumerable?", + DefaultValue = "null", + Description = "The cascading values to be provided for the children of the layout.", + LinkType = LinkType.Link, + Href = "#cascading-value" + }, new() { Name = "ChildContent", @@ -32,9 +41,38 @@ public partial class BitProLayoutDemo ]; private readonly List componentSubClasses = - [ + [new() + { + Id = "cascading-value", + Title = "BitCascadingValue", + Description = "The cascading value to be provided using the BitCascadingValueProvider component.", + Parameters= + [ + new() + { + Name = "Name", + Type = "string?", + DefaultValue = "null", + Description = "The optional name of the cascading value.", + }, + new() + { + Name = "Value", + Type = "object?", + DefaultValue = "null", + Description = "The value to be provided.", + }, + new() + { + Name = "IsFixed", + Type = "bool", + DefaultValue = "null", + Description = "If true, indicates that Value will not change.", + } + ] + }, new() - { + { Id = "class-styles", Title = "BitProLayoutClassStyles", Parameters= From b66d04b16048e9ea0fd484356c87e477353fc0c1 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Sun, 22 Dec 2024 09:08:40 +0330 Subject: [PATCH 7/8] fix seq value --- .../Components/ProLayout/BitCascadingValueProvider.cs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs index c6fd45a44c..4dc929cf99 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/ProLayout/BitCascadingValueProvider.cs @@ -40,7 +40,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder) rf = b => { CreateCascadingValue(b, s, v.Name, v.Value, v.IsFixed, r); }; - seq += v.Name.HasValue() ? 4 : 3; + seq += v.Name.HasValue() ? 5 : 4; } builder.AddContent(seq, rf); @@ -50,7 +50,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder) private void CreateCascadingValue(RenderTreeBuilder builder, int seq, string? name, - object? value, + object value, bool isFixed, RenderFragment? childContent) { From 0a0682eb6780d5cc74140ac9d25118fde348c1d7 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Sun, 22 Dec 2024 12:05:43 +0330 Subject: [PATCH 8/8] fix formatting --- .../Components/Extras/ProLayout/BitProLayoutDemo.razor.cs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor.cs index 34773f841c..714dbf8819 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/ProLayout/BitProLayoutDemo.razor.cs @@ -46,7 +46,7 @@ public partial class BitProLayoutDemo Id = "cascading-value", Title = "BitCascadingValue", Description = "The cascading value to be provided using the BitCascadingValueProvider component.", - Parameters= + Parameters = [ new() { @@ -75,7 +75,7 @@ public partial class BitProLayoutDemo { Id = "class-styles", Title = "BitProLayoutClassStyles", - Parameters= + Parameters = [ new() {