From a1929367ac45fc0e5ba3d72a80100aa983e64107 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sun, 4 Feb 2024 19:11:03 +0530 Subject: [PATCH 1/8] Spinner dots - draft --- .../BlazorBootstrap.Demo.RCL.csproj | 1 + BlazorBootstrap.Demo.RCL/Pages/Index.razor | 5 ++++ .../Pages/Spinner/SpinnerDocumentation.razor | 22 ++++++++++++++ .../Spinner/Spinner_Demo_01_Examples.razor | 1 + .../Shared/MainLayout.razor.cs | 7 +++-- .../Components/Spinner/Spinner.razor | 9 ++++++ .../Components/Spinner/Spinner.razor.cs | 23 ++++++++++++++ .../Components/Spinner/Spinner.razor.css | 30 +++++++++++++++++++ .../Utilities/BootstrapClassProvider.cs | 17 +++++++++++ .../blog/2024-02-04-blazorbootstrap-1.11.0.md | 6 ++-- 10 files changed, 115 insertions(+), 6 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_01_Examples.razor create mode 100644 blazorbootstrap/Components/Spinner/Spinner.razor create mode 100644 blazorbootstrap/Components/Spinner/Spinner.razor.cs create mode 100644 blazorbootstrap/Components/Spinner/Spinner.razor.css diff --git a/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj b/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj index 75ddd67a4..5b4e5e876 100644 --- a/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj +++ b/BlazorBootstrap.Demo.RCL/BlazorBootstrap.Demo.RCL.csproj @@ -20,6 +20,7 @@ + diff --git a/BlazorBootstrap.Demo.RCL/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Pages/Index.razor index 549b61833..cd9649779 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Index.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Index.razor @@ -170,6 +170,11 @@

Sidebar

+
+ +

Spinner New

+ +

Switch

diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor new file mode 100644 index 000000000..977360bf5 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor @@ -0,0 +1,22 @@ +@page "/spinner" + +@title + + + +

Blazor Spinner

+
+ The Icon component will display an icon from any icon font. +
+ + + + + + +@code{ + private string pageUrl = "/spinner"; + private string title = "Blazor Spinner Component"; + private string description = "Blazor Bootstrap Spinner component will display an icon from any icon font."; // TODO: update this + private string imageUrl = "https://i.imgur.com/273TamX.png"; // TODO: update this +} diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_01_Examples.razor new file mode 100644 index 000000000..19883cb3f --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_01_Examples.razor @@ -0,0 +1 @@ + diff --git a/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs index 016dd643f..63bd27569 100644 --- a/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Shared/MainLayout.razor.cs @@ -66,9 +66,10 @@ private IEnumerable GetNavItems() new (){ Id = "518", Text = "Progress", Href = "/progress", IconName = IconName.UsbC, ParentId = "5" }, new (){ Id = "519", Text = "Script Loader", Href = "/script-loader", IconName = IconName.CodeSlash, ParentId = "5" }, new (){ Id = "520", Text = "Sidebar", Href = "/sidebar", IconName = IconName.LayoutSidebar, ParentId = "5" }, - new (){ Id = "521", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" }, - new (){ Id = "522", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" }, - new (){ Id = "523", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" }, + new (){ Id = "521", Text = "Spinner", Href = "/spinner", IconName = IconName.ArrowRepeat, ParentId = "5" }, + new (){ Id = "522", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" }, + new (){ Id = "523", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" }, + new (){ Id = "524", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" }, new (){ Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning }, new (){ Id = "600", Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All }, diff --git a/blazorbootstrap/Components/Spinner/Spinner.razor b/blazorbootstrap/Components/Spinner/Spinner.razor new file mode 100644 index 000000000..ffb3bd679 --- /dev/null +++ b/blazorbootstrap/Components/Spinner/Spinner.razor @@ -0,0 +1,9 @@ +@namespace BlazorBootstrap +@inherits BlazorBootstrapComponentBase + + + @Title + + + + diff --git a/blazorbootstrap/Components/Spinner/Spinner.razor.cs b/blazorbootstrap/Components/Spinner/Spinner.razor.cs new file mode 100644 index 000000000..cb0dbf666 --- /dev/null +++ b/blazorbootstrap/Components/Spinner/Spinner.razor.cs @@ -0,0 +1,23 @@ +namespace BlazorBootstrap; + +public partial class Spinner : BlazorBootstrapComponentBase +{ + [Parameter] public int Width { get; set; } = 32; + + [Parameter] public int Height { get; set; } = 16; + + [Parameter] + public SpinnerColor Color { get; set; } + + [Parameter] public string Title { get; set; } = "Loading..."; + + /// + protected override void BuildClasses(CssClassBuilder builder) + { + builder.Append(BootstrapClassProvider.SpinnerDots()); + builder.Append(BootstrapClassProvider.Spinner(Color)); + } + + /// + protected override bool ShouldAutoGenerateId => true; +} diff --git a/blazorbootstrap/Components/Spinner/Spinner.razor.css b/blazorbootstrap/Components/Spinner/Spinner.razor.css new file mode 100644 index 000000000..37b56ee82 --- /dev/null +++ b/blazorbootstrap/Components/Spinner/Spinner.razor.css @@ -0,0 +1,30 @@ +/* scss-docs-start spinner-dots-keyframes */ +@keyframes spinner-dots { + 0% { + opacity: 1; + } + + 50%, 100% { + opacity: .3; + } +} + +/* scss-docs-end spinner-dots-keyframes */ +.spinner-dots { + user-select: none; +} + + .spinner-dots > circle:first-of-type, + .spinner-dots > circle:last-of-type, + .spinner-dots > circle:nth-of-type(2) { + fill: currentcolor; + animation: spinner-dots .75s infinite ease-in-out alternate; + } + + .spinner-dots > circle:nth-of-type(2) { + animation-delay: .25s; + } + + .spinner-dots > circle:last-of-type { + animation-delay: .5s; + } diff --git a/blazorbootstrap/Utilities/BootstrapClassProvider.cs b/blazorbootstrap/Utilities/BootstrapClassProvider.cs index d38306d60..64ba71137 100644 --- a/blazorbootstrap/Utilities/BootstrapClassProvider.cs +++ b/blazorbootstrap/Utilities/BootstrapClassProvider.cs @@ -170,6 +170,9 @@ public class BootstrapClassProvider public string Show() => "show"; + public string Spinner(SpinnerColor color) => ToSpinnerColor(color)!; + public string SpinnerDots() => "spinner-dots"; + public string Table() => "table"; public string TableActive() => "table-active"; public string TableBordered() => "table-bordered"; @@ -601,6 +604,20 @@ public string ToPosition(Position position) => _ => null }; + public string? ToSpinnerColor(SpinnerColor color) => + color switch + { + SpinnerColor.Primary => "text-primary", + SpinnerColor.Secondary => "text-secondary", + SpinnerColor.Success => "text-success", + SpinnerColor.Danger => "text-danger", + SpinnerColor.Warning => "text-warning", + SpinnerColor.Info => "text-info", + SpinnerColor.Light => "text-light", + SpinnerColor.Dark => "text-dark", + _ => null + }; + public string? ToTabColor(TabColor color) => color switch { diff --git a/docs/blog/2024-02-04-blazorbootstrap-1.11.0.md b/docs/blog/2024-02-04-blazorbootstrap-1.11.0.md index ef154472e..a37c2e6eb 100644 --- a/docs/blog/2024-02-04-blazorbootstrap-1.11.0.md +++ b/docs/blog/2024-02-04-blazorbootstrap-1.11.0.md @@ -16,15 +16,15 @@ We are excited to release version 1.11.0, featuring new PDF Viewer, Range Input, ## What's New -- 'PDF Viewer' component +- `PDF Viewer` component - Allows users to view PDF files directly in the browser, eliminating the need for third-party browser tools or extensions. - Supports two callback events: OnDocumentLoaded and OnPageChanged -- 'Range Input' component +- `Range Input` component - Disabled - Min and Max - Step - Tick marks -- 'Script Loader' component +- `Script Loader` component - Allows users to load JS sctipt files dynamically on the fly. ## What's changed From b232d7935da52d3afe06f2ae64f6f415565f1eca Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Mon, 5 Feb 2024 02:56:25 +0530 Subject: [PATCH 2/8] Spinner draft --- .../Pages/Spinner/SpinnerDocumentation.razor | 4 ++-- .../Components/Spinner/Spinner.razor | 8 +++++-- .../Components/Spinner/Spinner.razor.cs | 23 ++++++++++++------- .../Utilities/BootstrapClassProvider.cs | 7 ++++-- 4 files changed, 28 insertions(+), 14 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor index 977360bf5..1317e34bd 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor @@ -6,7 +6,7 @@

Blazor Spinner

- The Icon component will display an icon from any icon font. + Indicate the loading state of a component or page with Bootstrap Bootstrap Spinners.
@@ -17,6 +17,6 @@ @code{ private string pageUrl = "/spinner"; private string title = "Blazor Spinner Component"; - private string description = "Blazor Bootstrap Spinner component will display an icon from any icon font."; // TODO: update this + private string description = "Indicate the loading state of a component or page with Bootstrap Bootstrap Spinners."; private string imageUrl = "https://i.imgur.com/273TamX.png"; // TODO: update this } diff --git a/blazorbootstrap/Components/Spinner/Spinner.razor b/blazorbootstrap/Components/Spinner/Spinner.razor index ffb3bd679..0b1ba0799 100644 --- a/blazorbootstrap/Components/Spinner/Spinner.razor +++ b/blazorbootstrap/Components/Spinner/Spinner.razor @@ -1,9 +1,13 @@ @namespace BlazorBootstrap @inherits BlazorBootstrapComponentBase - +@* @Title - + *@ + +
+ +
diff --git a/blazorbootstrap/Components/Spinner/Spinner.razor.cs b/blazorbootstrap/Components/Spinner/Spinner.razor.cs index cb0dbf666..8111d0e07 100644 --- a/blazorbootstrap/Components/Spinner/Spinner.razor.cs +++ b/blazorbootstrap/Components/Spinner/Spinner.razor.cs @@ -2,14 +2,7 @@ public partial class Spinner : BlazorBootstrapComponentBase { - [Parameter] public int Width { get; set; } = 32; - - [Parameter] public int Height { get; set; } = 16; - - [Parameter] - public SpinnerColor Color { get; set; } - - [Parameter] public string Title { get; set; } = "Loading..."; + #region Methods /// protected override void BuildClasses(CssClassBuilder builder) @@ -18,6 +11,20 @@ protected override void BuildClasses(CssClassBuilder builder) builder.Append(BootstrapClassProvider.Spinner(Color)); } + #endregion + + #region Properties, Indexers + /// protected override bool ShouldAutoGenerateId => true; + + [Parameter] public SpinnerColor Color { get; set; } + + [Parameter] public int Height { get; set; } = 16; + + [Parameter] public string Title { get; set; } = "Loading..."; + + [Parameter] public int Width { get; set; } = 32; + + #endregion } diff --git a/blazorbootstrap/Utilities/BootstrapClassProvider.cs b/blazorbootstrap/Utilities/BootstrapClassProvider.cs index 64ba71137..38c1671ee 100644 --- a/blazorbootstrap/Utilities/BootstrapClassProvider.cs +++ b/blazorbootstrap/Utilities/BootstrapClassProvider.cs @@ -169,9 +169,12 @@ public class BootstrapClassProvider public string ProgressBarStriped() => $"{ProgressBar()}-striped"; public string Show() => "show"; - + + public string Spinner() => "spinner"; public string Spinner(SpinnerColor color) => ToSpinnerColor(color)!; - public string SpinnerDots() => "spinner-dots"; + public string SpinnerBorder() => $"{Spinner()}-border"; + public string SpinnerDots() => $"{Spinner()}-dots"; + public string SpinnerGrow() => $"{Spinner()}-grow"; public string Table() => "table"; public string TableActive() => "table-active"; From 7f6cb4fafdb30af494be885516651573b649324f Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Fri, 9 Feb 2024 23:40:41 +0530 Subject: [PATCH 3/8] Spinner updates --- .../Pages/Spinner/SpinnerDocumentation.razor | 11 ++++ .../Spinner/Spinner_Demo_02_Colors.razor | 8 +++ .../Spinner_Demo_03_Grow_spinner_A.razor | 1 + .../Spinner_Demo_03_Grow_spinner_B.razor | 8 +++ ...inner_Demo_04_Loading_dots_spinner_A.razor | 1 + ...inner_Demo_04_Loading_dots_spinner_B.razor | 8 +++ .../Components/Spinner/Spinner.razor | 28 ++++++--- .../Components/Spinner/Spinner.razor.cs | 63 ++++++++++++++++++- blazorbootstrap/Enums/SpinnerType.cs | 8 +++ 9 files changed, 123 insertions(+), 13 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_02_Colors.razor create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_03_Grow_spinner_A.razor create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_03_Grow_spinner_B.razor create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_04_Loading_dots_spinner_A.razor create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_04_Loading_dots_spinner_B.razor create mode 100644 blazorbootstrap/Enums/SpinnerType.cs diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor index 1317e34bd..da0635eb7 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor @@ -14,6 +14,17 @@ + + + + + + + + + + + @code{ private string pageUrl = "/spinner"; private string title = "Blazor Spinner Component"; diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_02_Colors.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_02_Colors.razor new file mode 100644 index 000000000..d8269f61a --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_02_Colors.razor @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_03_Grow_spinner_A.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_03_Grow_spinner_A.razor new file mode 100644 index 000000000..b937167d8 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_03_Grow_spinner_A.razor @@ -0,0 +1 @@ + diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_03_Grow_spinner_B.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_03_Grow_spinner_B.razor new file mode 100644 index 000000000..c11ad48de --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_03_Grow_spinner_B.razor @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_04_Loading_dots_spinner_A.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_04_Loading_dots_spinner_A.razor new file mode 100644 index 000000000..13eb71bbf --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_04_Loading_dots_spinner_A.razor @@ -0,0 +1 @@ + diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_04_Loading_dots_spinner_B.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_04_Loading_dots_spinner_B.razor new file mode 100644 index 000000000..dfa460db2 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_04_Loading_dots_spinner_B.razor @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/blazorbootstrap/Components/Spinner/Spinner.razor b/blazorbootstrap/Components/Spinner/Spinner.razor index 0b1ba0799..4fd828d1a 100644 --- a/blazorbootstrap/Components/Spinner/Spinner.razor +++ b/blazorbootstrap/Components/Spinner/Spinner.razor @@ -1,13 +1,21 @@ @namespace BlazorBootstrap @inherits BlazorBootstrapComponentBase -@* - @Title - - - - *@ - -
- -
+@if (Type == SpinnerType.Dots) +{ + + @if (!string.IsNullOrWhiteSpace(Title)) + { + @Title + } + + + + +} +else +{ +
+ +
+} diff --git a/blazorbootstrap/Components/Spinner/Spinner.razor.cs b/blazorbootstrap/Components/Spinner/Spinner.razor.cs index 8111d0e07..cf0a05382 100644 --- a/blazorbootstrap/Components/Spinner/Spinner.razor.cs +++ b/blazorbootstrap/Components/Spinner/Spinner.razor.cs @@ -1,14 +1,45 @@ -namespace BlazorBootstrap; +using System.Reflection.Metadata.Ecma335; +using System; + +namespace BlazorBootstrap; public partial class Spinner : BlazorBootstrapComponentBase { + #region Fields and Constants + + private SpinnerColor color = SpinnerColor.None; + private SpinnerType type = SpinnerType.Border; + + #endregion + #region Methods /// protected override void BuildClasses(CssClassBuilder builder) { - builder.Append(BootstrapClassProvider.SpinnerDots()); + builder.Append(BootstrapClassProvider.SpinnerBorder(), Type == SpinnerType.Border); + builder.Append(BootstrapClassProvider.SpinnerGrow(), Type == SpinnerType.Grow); + builder.Append(BootstrapClassProvider.SpinnerDots(), Type == SpinnerType.Dots); builder.Append(BootstrapClassProvider.Spinner(Color)); + + base.BuildClasses(builder); + } + + protected override void OnInitialized() + { + Attributes ??= new Dictionary(); + + if (Type != SpinnerType.Dots) + { + if (string.IsNullOrWhiteSpace(Title)) + Attributes.Remove("title"); + else if(!Attributes.TryGetValue("title", out _)) + Attributes.Add("title", Title); + else if (Attributes.TryGetValue("title", out _)) + Attributes["title"] = Title; + } + + base.OnInitialized(); } #endregion @@ -18,13 +49,39 @@ protected override void BuildClasses(CssClassBuilder builder) /// protected override bool ShouldAutoGenerateId => true; - [Parameter] public SpinnerColor Color { get; set; } + [Parameter] + public SpinnerColor Color + { + get => color; + set + { + color = value; + DirtyClasses(); + } + } [Parameter] public int Height { get; set; } = 16; [Parameter] public string Title { get; set; } = "Loading..."; + [Parameter] + public SpinnerType Type + { + get => type; + set + { + type = value; + DirtyClasses(); + } + } + [Parameter] public int Width { get; set; } = 32; + /// + /// Gets or sets the visually hidden text. + /// + [Parameter] + public string VisuallyHiddenText { get; set; } = "Loading..."; + #endregion } diff --git a/blazorbootstrap/Enums/SpinnerType.cs b/blazorbootstrap/Enums/SpinnerType.cs new file mode 100644 index 000000000..ab1968da5 --- /dev/null +++ b/blazorbootstrap/Enums/SpinnerType.cs @@ -0,0 +1,8 @@ +namespace BlazorBootstrap; + +public enum SpinnerType +{ + Border, + Grow, + Dots +} From faf4a04e6ad7dbf48012bc0f1b2b3b5d4f138d4a Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 10 Feb 2024 18:50:51 +0530 Subject: [PATCH 4/8] Spinner updates --- .../Pages/Spinner/SpinnerDocumentation.razor | 20 +++++++ ...inner_Demo_04_Loading_dots_spinner_B.razor | 16 ++--- .../Spinner_Demo_05_Alignment_A_Margin.razor | 1 + ...emo_05_Alignment_B_Palcement_Flex_01.razor | 3 + ...emo_05_Alignment_B_Palcement_Flex_02.razor | 4 ++ ...Demo_05_Alignment_C_Palcement_Floats.razor | 3 + ..._05_Alignment_D_Palcement_Text_align.razor | 3 + .../Spinner_Demo_06_Size_A_Border.razor | 4 ++ .../Spinner/Spinner_Demo_06_Size_B_Grow.razor | 4 ++ .../Spinner/Spinner_Demo_06_Size_C_Dots.razor | 1 + .../Components/Spinner/Spinner.razor.cs | 24 ++++---- .../Components/Spinner/Spinner.razor.css | 58 +++++++++++++++++++ blazorbootstrap/Enums/SpinnerSize.cs | 24 ++++++++ .../Utilities/BootstrapClassProvider.cs | 24 +++++++- .../Utilities/BootstrapStyleProvider.cs | 10 ++++ 15 files changed, 175 insertions(+), 24 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_A_Margin.razor create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_B_Palcement_Flex_01.razor create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_B_Palcement_Flex_02.razor create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_C_Palcement_Floats.razor create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_D_Palcement_Text_align.razor create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_A_Border.razor create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_B_Grow.razor create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_C_Dots.razor create mode 100644 blazorbootstrap/Enums/SpinnerSize.cs create mode 100644 blazorbootstrap/Utilities/BootstrapStyleProvider.cs diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor index da0635eb7..8cdb125e1 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor @@ -25,6 +25,26 @@ + + + + + + + + + + + + + + + + + + + + @code{ private string pageUrl = "/spinner"; private string title = "Blazor Spinner Component"; diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_04_Loading_dots_spinner_B.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_04_Loading_dots_spinner_B.razor index dfa460db2..38bed6132 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_04_Loading_dots_spinner_B.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_04_Loading_dots_spinner_B.razor @@ -1,8 +1,8 @@ - - - - - - - - + + + + + + + + diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_A_Margin.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_A_Margin.razor new file mode 100644 index 000000000..610f53f16 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_A_Margin.razor @@ -0,0 +1 @@ + diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_B_Palcement_Flex_01.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_B_Palcement_Flex_01.razor new file mode 100644 index 000000000..a1bc75cfe --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_B_Palcement_Flex_01.razor @@ -0,0 +1,3 @@ +
+ +
diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_B_Palcement_Flex_02.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_B_Palcement_Flex_02.razor new file mode 100644 index 000000000..dabeecfb8 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_B_Palcement_Flex_02.razor @@ -0,0 +1,4 @@ +
+ Loading... + +
diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_C_Palcement_Floats.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_C_Palcement_Floats.razor new file mode 100644 index 000000000..cfac61c99 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_C_Palcement_Floats.razor @@ -0,0 +1,3 @@ +
+ +
diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_D_Palcement_Text_align.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_D_Palcement_Text_align.razor new file mode 100644 index 000000000..a26a69e1b --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_05_Alignment_D_Palcement_Text_align.razor @@ -0,0 +1,3 @@ +
+ +
diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_A_Border.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_A_Border.razor new file mode 100644 index 000000000..6f43beb0f --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_A_Border.razor @@ -0,0 +1,4 @@ + + + + diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_B_Grow.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_B_Grow.razor new file mode 100644 index 000000000..86b6883e9 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_B_Grow.razor @@ -0,0 +1,4 @@ + + + + diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_C_Dots.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_C_Dots.razor new file mode 100644 index 000000000..13eb71bbf --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_C_Dots.razor @@ -0,0 +1 @@ + diff --git a/blazorbootstrap/Components/Spinner/Spinner.razor.cs b/blazorbootstrap/Components/Spinner/Spinner.razor.cs index cf0a05382..bd11e8389 100644 --- a/blazorbootstrap/Components/Spinner/Spinner.razor.cs +++ b/blazorbootstrap/Components/Spinner/Spinner.razor.cs @@ -1,7 +1,4 @@ -using System.Reflection.Metadata.Ecma335; -using System; - -namespace BlazorBootstrap; +namespace BlazorBootstrap; public partial class Spinner : BlazorBootstrapComponentBase { @@ -17,10 +14,9 @@ public partial class Spinner : BlazorBootstrapComponentBase /// protected override void BuildClasses(CssClassBuilder builder) { - builder.Append(BootstrapClassProvider.SpinnerBorder(), Type == SpinnerType.Border); - builder.Append(BootstrapClassProvider.SpinnerGrow(), Type == SpinnerType.Grow); - builder.Append(BootstrapClassProvider.SpinnerDots(), Type == SpinnerType.Dots); + builder.Append(BootstrapClassProvider.Spinner(Type)); builder.Append(BootstrapClassProvider.Spinner(Color)); + builder.Append(BootstrapClassProvider.Spinner(Type, Size), Type is (SpinnerType.Border or SpinnerType.Grow)); base.BuildClasses(builder); } @@ -32,8 +28,8 @@ protected override void OnInitialized() if (Type != SpinnerType.Dots) { if (string.IsNullOrWhiteSpace(Title)) - Attributes.Remove("title"); - else if(!Attributes.TryGetValue("title", out _)) + Attributes.Remove("title"); + else if (!Attributes.TryGetValue("title", out _)) Attributes.Add("title", Title); else if (Attributes.TryGetValue("title", out _)) Attributes["title"] = Title; @@ -62,7 +58,9 @@ public SpinnerColor Color [Parameter] public int Height { get; set; } = 16; - [Parameter] public string Title { get; set; } = "Loading..."; + [Parameter] public SpinnerSize Size { get; set; } = SpinnerSize.Medium; + + [Parameter] public string? Title { get; set; } [Parameter] public SpinnerType Type @@ -75,13 +73,13 @@ public SpinnerType Type } } - [Parameter] public int Width { get; set; } = 32; - /// /// Gets or sets the visually hidden text. /// [Parameter] - public string VisuallyHiddenText { get; set; } = "Loading..."; + public string? VisuallyHiddenText { get; set; } = "Loading..."; + + [Parameter] public int Width { get; set; } = 32; #endregion } diff --git a/blazorbootstrap/Components/Spinner/Spinner.razor.css b/blazorbootstrap/Components/Spinner/Spinner.razor.css index 37b56ee82..b7e248257 100644 --- a/blazorbootstrap/Components/Spinner/Spinner.razor.css +++ b/blazorbootstrap/Components/Spinner/Spinner.razor.css @@ -28,3 +28,61 @@ .spinner-dots > circle:last-of-type { animation-delay: .5s; } + +/* Size: START */ + +/* default */ +.spinner-border-sm { + --bs-spinner-width: 1rem; + --bs-spinner-height: 1rem; + --bs-spinner-border-width: 0.25em; + --bs-spinner-vertical-align: -0.125em; +} +/* custom CSS classes */ +.spinner-border-md { + --bs-spinner-width: 2rem; + --bs-spinner-height: 2rem; + --bs-spinner-border-width: 0.25em; + --bs-spinner-vertical-align: -0.125em; +} +.spinner-border-lg { + --bs-spinner-width: 3rem; + --bs-spinner-height: 3rem; + --bs-spinner-border-width: 0.25em; + --bs-spinner-vertical-align: -0.125em; +} +.spinner-border-xl { + --bs-spinner-width: 4rem; + --bs-spinner-height: 4rem; + --bs-spinner-border-width: 0.25em; + --bs-spinner-vertical-align: -0.125em; +} + +/* default */ +.spinner-grow-sm { + --bs-spinner-width: 1rem; + --bs-spinner-height: 1rem; + --bs-spinner-border-width: 0.25em; + --bs-spinner-vertical-align: -0.125em; +} +/* custom CSS classes */ +.spinner-grow-md { + --bs-spinner-width: 2rem; + --bs-spinner-height: 2rem; + --bs-spinner-border-width: 0.25em; + --bs-spinner-vertical-align: -0.125em; +} +.spinner-grow-lg { + --bs-spinner-width: 3rem; + --bs-spinner-height: 3rem; + --bs-spinner-border-width: 0.25em; + --bs-spinner-vertical-align: -0.125em; +} +.spinner-grow-xl { + --bs-spinner-width: 4rem; + --bs-spinner-height: 4rem; + --bs-spinner-border-width: 0.25em; + --bs-spinner-vertical-align: -0.125em; +} + +/* Size: END */ \ No newline at end of file diff --git a/blazorbootstrap/Enums/SpinnerSize.cs b/blazorbootstrap/Enums/SpinnerSize.cs new file mode 100644 index 000000000..9fc6f1708 --- /dev/null +++ b/blazorbootstrap/Enums/SpinnerSize.cs @@ -0,0 +1,24 @@ +namespace BlazorBootstrap; + +public enum SpinnerSize +{ + /// + /// Makes an element small size. + /// + Small, + + /// + /// Makes an element medium size. + /// + Medium, + + /// + /// Makes an element large. + /// + Large, + + /// + /// Makes an element extra large. + /// + ExtraLarge +} diff --git a/blazorbootstrap/Utilities/BootstrapClassProvider.cs b/blazorbootstrap/Utilities/BootstrapClassProvider.cs index 38c1671ee..4d4637642 100644 --- a/blazorbootstrap/Utilities/BootstrapClassProvider.cs +++ b/blazorbootstrap/Utilities/BootstrapClassProvider.cs @@ -172,9 +172,8 @@ public class BootstrapClassProvider public string Spinner() => "spinner"; public string Spinner(SpinnerColor color) => ToSpinnerColor(color)!; - public string SpinnerBorder() => $"{Spinner()}-border"; - public string SpinnerDots() => $"{Spinner()}-dots"; - public string SpinnerGrow() => $"{Spinner()}-grow"; + public string Spinner(SpinnerType type) => $"{Spinner()}-{ToSpinnerType(type)}"; + public string Spinner(SpinnerType type, SpinnerSize size) => $"{Spinner(type)}-{ToSpinnerSize(size)}"; public string Table() => "table"; public string TableActive() => "table-active"; @@ -621,6 +620,25 @@ public string ToPosition(Position position) => _ => null }; + public string ToSpinnerSize(SpinnerSize size) => + size switch + { + SpinnerSize.Small => "sm", + SpinnerSize.Medium => "md", + SpinnerSize.Large => "lg", + SpinnerSize.ExtraLarge => "xl", + _ => "md" + }; + + public string ToSpinnerType(SpinnerType type) => + type switch + { + SpinnerType.Border => "border", + SpinnerType.Grow => "grow", + SpinnerType.Dots => "dots", + _ => "border" + }; + public string? ToTabColor(TabColor color) => color switch { diff --git a/blazorbootstrap/Utilities/BootstrapStyleProvider.cs b/blazorbootstrap/Utilities/BootstrapStyleProvider.cs new file mode 100644 index 000000000..9a9a92cea --- /dev/null +++ b/blazorbootstrap/Utilities/BootstrapStyleProvider.cs @@ -0,0 +1,10 @@ +namespace BlazorBootstrap; + +public class BootstrapStyleProvider +{ + #region Methods + + // TODO: place holder for custom styles + + #endregion +} From e36a8565d4d33c58b8430eb73a072137e7b8b0d6 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 10 Feb 2024 21:11:38 +0530 Subject: [PATCH 5/8] Spinner component updates --- .../Spinner/Spinner_Demo_06_Size_C_Dots.razor | 5 ++- .../Components/Spinner/Spinner.razor | 8 ++--- .../Components/Spinner/Spinner.razor.cs | 31 ++++++++++++++++--- blazorbootstrap/Models/SpinnerCircle.cs | 3 ++ 4 files changed, 38 insertions(+), 9 deletions(-) create mode 100644 blazorbootstrap/Models/SpinnerCircle.cs diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_C_Dots.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_C_Dots.razor index 13eb71bbf..0ed9e9275 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_C_Dots.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_C_Dots.razor @@ -1 +1,4 @@ - + + + + diff --git a/blazorbootstrap/Components/Spinner/Spinner.razor b/blazorbootstrap/Components/Spinner/Spinner.razor index 4fd828d1a..7aebb9cc5 100644 --- a/blazorbootstrap/Components/Spinner/Spinner.razor +++ b/blazorbootstrap/Components/Spinner/Spinner.razor @@ -3,14 +3,14 @@ @if (Type == SpinnerType.Dots) { - + @if (!string.IsNullOrWhiteSpace(Title)) { @Title } - - - + + + } else diff --git a/blazorbootstrap/Components/Spinner/Spinner.razor.cs b/blazorbootstrap/Components/Spinner/Spinner.razor.cs index bd11e8389..4e385b89e 100644 --- a/blazorbootstrap/Components/Spinner/Spinner.razor.cs +++ b/blazorbootstrap/Components/Spinner/Spinner.razor.cs @@ -5,6 +5,7 @@ public partial class Spinner : BlazorBootstrapComponentBase #region Fields and Constants private SpinnerColor color = SpinnerColor.None; + private SpinnerType type = SpinnerType.Border; #endregion @@ -38,6 +39,30 @@ protected override void OnInitialized() base.OnInitialized(); } + private (int Width, int Height, List Circles) GetSpinnerSvgInfo() + { + var radius = 4; // default: SpinnerSize.Medium + + if (Size == SpinnerSize.Small) + radius = 2; + else if (Size == SpinnerSize.Large) + radius = 6; + else if (Size == SpinnerSize.ExtraLarge) + radius = 8; + + var defaultSpace = 4; + var diameter = 2 * radius; + + var circle1 = new SpinnerCircle(radius, radius, diameter); + var circle2 = new SpinnerCircle(radius, circle1.Cx + diameter + defaultSpace, diameter); + var circle3 = new SpinnerCircle(radius, circle2.Cx + diameter + defaultSpace, diameter); + + var width = defaultSpace + diameter * 3 + defaultSpace; + var height = defaultSpace + diameter + defaultSpace; + + return (width, height, new List { circle1, circle2, circle3 }); + } + #endregion #region Properties, Indexers @@ -56,10 +81,10 @@ public SpinnerColor Color } } - [Parameter] public int Height { get; set; } = 16; - [Parameter] public SpinnerSize Size { get; set; } = SpinnerSize.Medium; + private (int Width, int Height, List Circles) SpinnerSvg => GetSpinnerSvgInfo(); + [Parameter] public string? Title { get; set; } [Parameter] @@ -79,7 +104,5 @@ public SpinnerType Type [Parameter] public string? VisuallyHiddenText { get; set; } = "Loading..."; - [Parameter] public int Width { get; set; } = 32; - #endregion } diff --git a/blazorbootstrap/Models/SpinnerCircle.cs b/blazorbootstrap/Models/SpinnerCircle.cs new file mode 100644 index 000000000..5e82c6e2b --- /dev/null +++ b/blazorbootstrap/Models/SpinnerCircle.cs @@ -0,0 +1,3 @@ +namespace BlazorBootstrap; + +public record SpinnerCircle(int Radius, int Cx, int Cy); \ No newline at end of file From 8b96eaa5a0383e7aebb90cf8d425e1284e97dcdd Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 10 Feb 2024 21:48:41 +0530 Subject: [PATCH 6/8] Spinner component - Visible parameter --- .../Pages/Spinner/SpinnerDocumentation.razor | 3 ++ .../Spinner/Spinner_Demo_06_Size_C_Dots.razor | 8 ++--- .../Spinner/Spinner_Demo_07_Visible.razor | 14 ++++++++ .../Components/Spinner/Spinner.razor | 35 ++++++++++--------- .../Components/Spinner/Spinner.razor.cs | 2 ++ 5 files changed, 42 insertions(+), 20 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_07_Visible.razor diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor index 8cdb125e1..49ef5c6bb 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor @@ -45,6 +45,9 @@ + + + @code{ private string pageUrl = "/spinner"; private string title = "Blazor Spinner Component"; diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_C_Dots.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_C_Dots.razor index 0ed9e9275..0d13af404 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_C_Dots.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_06_Size_C_Dots.razor @@ -1,4 +1,4 @@ - - - - + + + + diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_07_Visible.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_07_Visible.razor new file mode 100644 index 000000000..f15cc5ae0 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_07_Visible.razor @@ -0,0 +1,14 @@ + + +
+ + +
+ +@code { + private bool visible = true; + + private void Hide() => visible = false; + + private void Show() => visible = true; +} diff --git a/blazorbootstrap/Components/Spinner/Spinner.razor b/blazorbootstrap/Components/Spinner/Spinner.razor index 7aebb9cc5..01424d629 100644 --- a/blazorbootstrap/Components/Spinner/Spinner.razor +++ b/blazorbootstrap/Components/Spinner/Spinner.razor @@ -1,21 +1,24 @@ @namespace BlazorBootstrap @inherits BlazorBootstrapComponentBase -@if (Type == SpinnerType.Dots) +@if (Visible) { - - @if (!string.IsNullOrWhiteSpace(Title)) - { - @Title - } - - - - -} -else -{ -
- -
+ @if (Type == SpinnerType.Dots) + { + + @if (!string.IsNullOrWhiteSpace(Title)) + { + @Title + } + + + + + } + else + { +
+ +
+ } } diff --git a/blazorbootstrap/Components/Spinner/Spinner.razor.cs b/blazorbootstrap/Components/Spinner/Spinner.razor.cs index 4e385b89e..a48d4404b 100644 --- a/blazorbootstrap/Components/Spinner/Spinner.razor.cs +++ b/blazorbootstrap/Components/Spinner/Spinner.razor.cs @@ -104,5 +104,7 @@ public SpinnerType Type [Parameter] public string? VisuallyHiddenText { get; set; } = "Loading..."; + [Parameter] public bool Visible { get; set; } = true; + #endregion } From 43c15ca634ea2f0cc36c0f51c5616a4c7ce1b940 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 10 Feb 2024 21:55:19 +0530 Subject: [PATCH 7/8] Spinner Component - XML comments added. --- .../Components/Spinner/Spinner.razor.cs | 36 ++++++++++++++++--- 1 file changed, 32 insertions(+), 4 deletions(-) diff --git a/blazorbootstrap/Components/Spinner/Spinner.razor.cs b/blazorbootstrap/Components/Spinner/Spinner.razor.cs index a48d4404b..afaf82437 100644 --- a/blazorbootstrap/Components/Spinner/Spinner.razor.cs +++ b/blazorbootstrap/Components/Spinner/Spinner.razor.cs @@ -39,8 +39,13 @@ protected override void OnInitialized() base.OnInitialized(); } + /// + /// Calculates width, height, and circles information for the spinner SVG. + /// + /// A tuple containing width, height, and a list of spinner circles. private (int Width, int Height, List Circles) GetSpinnerSvgInfo() { + // Calculate radius based on Size var radius = 4; // default: SpinnerSize.Medium if (Size == SpinnerSize.Small) @@ -51,6 +56,8 @@ protected override void OnInitialized() radius = 8; var defaultSpace = 4; + + // Calculate other dimensions based on radius var diameter = 2 * radius; var circle1 = new SpinnerCircle(radius, radius, diameter); @@ -70,6 +77,9 @@ protected override void OnInitialized() /// protected override bool ShouldAutoGenerateId => true; + /// + /// Gets or sets the color of the spinner. + /// [Parameter] public SpinnerColor Color { @@ -81,12 +91,26 @@ public SpinnerColor Color } } - [Parameter] public SpinnerSize Size { get; set; } = SpinnerSize.Medium; + /// + /// Gets or sets the size of the spinner. + /// + [Parameter] + public SpinnerSize Size { get; set; } = SpinnerSize.Medium; + /// + /// Gets the width, height, and circles information for the spinner SVG. + /// private (int Width, int Height, List Circles) SpinnerSvg => GetSpinnerSvgInfo(); - [Parameter] public string? Title { get; set; } + /// + /// Gets or sets the title text used as an accessibility attribute. + /// + [Parameter] + public string? Title { get; set; } + /// + /// Gets or sets the type of the spinner. + /// [Parameter] public SpinnerType Type { @@ -98,13 +122,17 @@ public SpinnerType Type } } + /// + /// Gets or sets whether the spinner is visible or not. + /// + [Parameter] + public bool Visible { get; set; } = true; + /// /// Gets or sets the visually hidden text. /// [Parameter] public string? VisuallyHiddenText { get; set; } = "Loading..."; - [Parameter] public bool Visible { get; set; } = true; - #endregion } From 6f132b22f0fe0811432c1a8900cb8dfcc157795e Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 10 Feb 2024 22:58:20 +0530 Subject: [PATCH 8/8] Spinner - demos update --- .../Pages/Spinner/SpinnerDocumentation.razor | 18 +++++++++++++----- ...or => Spinner_Demo_01_Border_Spinner.razor} | 0 2 files changed, 13 insertions(+), 5 deletions(-) rename BlazorBootstrap.Demo.RCL/Pages/Spinner/{Spinner_Demo_01_Examples.razor => Spinner_Demo_01_Border_Spinner.razor} (100%) diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor index 49ef5c6bb..cdf7cdb15 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Spinner/SpinnerDocumentation.razor @@ -6,22 +6,30 @@

Blazor Spinner

- Indicate the loading state of a component or page with Bootstrap Bootstrap Spinners. + Visualize the loading state of a component or page using the Blazor Bootstrap Spinner component.
- +@* *@ - - + +
Use the border spinners for a lightweight loading indicator.
+ +
+ The border spinner's border color inherits the element's color (currentColor). This means you can easily customize the spinner's color by changing the Color parameter on the standard spinner. +
+
+ If you don't fancy a border spinner, switch to the grow spinner, while it doesn't technically spin, it does repeatedly grow! +
+
The loading dots are a special indicator for a lightweight loading indicator.
@@ -51,6 +59,6 @@ @code{ private string pageUrl = "/spinner"; private string title = "Blazor Spinner Component"; - private string description = "Indicate the loading state of a component or page with Bootstrap Bootstrap Spinners."; + private string description = "Visualize the loading state of a component or page using the Blazor Bootstrap Spinner component."; private string imageUrl = "https://i.imgur.com/273TamX.png"; // TODO: update this } diff --git a/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_01_Border_Spinner.razor similarity index 100% rename from BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_01_Examples.razor rename to BlazorBootstrap.Demo.RCL/Pages/Spinner/Spinner_Demo_01_Border_Spinner.razor