From 8f314297bc89ea26b970049a03f45b25c1fe5ad1 Mon Sep 17 00:00:00 2001 From: Vikram Gaddam Date: Sun, 1 Oct 2023 11:29:54 +0530 Subject: [PATCH] IconSize is wrong when generated by a button #347 (#385) --- .../Pages/Buttons/ButtonDocumentation.razor | 3 +- .../Buttons/Button_Demo_04_Sizes_C.razor | 5 ++ ...on_Demo_08_Show_Hide_Loading_Spinner.razor | 65 ++++++++++++++-- .../Components/Button/Button.razor.cs | 2 +- blazorbootstrap/wwwroot/blazor.bootstrap.css | 74 +++++++++++++++++++ 5 files changed, 139 insertions(+), 10 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Pages/Buttons/Button_Demo_04_Sizes_C.razor diff --git a/BlazorBootstrap.Demo.RCL/Pages/Buttons/ButtonDocumentation.razor b/BlazorBootstrap.Demo.RCL/Pages/Buttons/ButtonDocumentation.razor index 67b947547..ace16c2db 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Buttons/ButtonDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Buttons/ButtonDocumentation.razor @@ -27,6 +27,7 @@
Fancy larger or smaller buttons? Add Size="Size.Large" or Size="Size.Small" for additional sizes.
+
Make buttons look inactive by adding the Disabled="true" boolean parameter to any Button component. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering.
@@ -56,7 +57,7 @@ - +
diff --git a/BlazorBootstrap.Demo.RCL/Pages/Buttons/Button_Demo_04_Sizes_C.razor b/BlazorBootstrap.Demo.RCL/Pages/Buttons/Button_Demo_04_Sizes_C.razor new file mode 100644 index 000000000..3adf4aa33 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Pages/Buttons/Button_Demo_04_Sizes_C.razor @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Pages/Buttons/Button_Demo_08_Show_Hide_Loading_Spinner.razor b/BlazorBootstrap.Demo.RCL/Pages/Buttons/Button_Demo_08_Show_Hide_Loading_Spinner.razor index 4c81de362..85ad95e7c 100644 --- a/BlazorBootstrap.Demo.RCL/Pages/Buttons/Button_Demo_08_Show_Hide_Loading_Spinner.razor +++ b/BlazorBootstrap.Demo.RCL/Pages/Buttons/Button_Demo_08_Show_Hide_Loading_Spinner.razor @@ -1,14 +1,63 @@ - - + + + + + @code { - private Button saveButton; + private Button saveButton1, saveButton2, saveButton3, saveButton4, saveButton5; + + private async Task OnSave1Click() + { + saveButton1?.ShowLoading("Loading..."); + + await Task.Delay(3000); // API call + + saveButton1?.HideLoading(); + } + + private async Task OnSave2Click() + { + saveButton2?.ShowLoading("Loading..."); + + await Task.Delay(3000); // API call + + saveButton2?.HideLoading(); + } + + private async Task OnSave3Click() + { + saveButton3?.ShowLoading("Loading..."); + + await Task.Delay(3000); // API call + + saveButton3?.HideLoading(); + } + + private async Task OnSave4Click() + { + saveButton4?.ShowLoading("Loading..."); + + await Task.Delay(3000); // API call + + saveButton4?.HideLoading(); + } - private async Task OnSaveClick() + private async Task OnSave5Click() { - saveButton?.ShowLoading("Saving details..."); + saveButton5?.ShowLoading("Loading..."); - await Task.Delay(5000); // API call + await Task.Delay(3000); // API call - saveButton?.HideLoading(); + saveButton5?.HideLoading(); } -} \ No newline at end of file +} diff --git a/blazorbootstrap/Components/Button/Button.razor.cs b/blazorbootstrap/Components/Button/Button.razor.cs index b6b2d7484..3299b2cca 100644 --- a/blazorbootstrap/Components/Button/Button.razor.cs +++ b/blazorbootstrap/Components/Button/Button.razor.cs @@ -177,7 +177,7 @@ public void ShowLoading(string text = "") StateHasChanged(); } - protected virtual RenderFragment ProvideDefaultLoadingTemplate() => builder => { builder.AddMarkupContent(0, $" {loadingText}"); }; + protected virtual RenderFragment ProvideDefaultLoadingTemplate() => builder => { builder.AddMarkupContent(0, $" {loadingText}"); }; private void SetAttributes() { diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.css b/blazorbootstrap/wwwroot/blazor.bootstrap.css index 5cd3ff708..02123cd7a 100644 --- a/blazorbootstrap/wwwroot/blazor.bootstrap.css +++ b/blazorbootstrap/wwwroot/blazor.bootstrap.css @@ -44,6 +44,9 @@ --bb-tooltip-dark: var(--bs-dark); --bb-tooltip-color-white: var(--bs-white); --bb-tooltip-color-dark: var(--bs-black); + /* border */ + --bs-border-radius-xs: 0.125rem; + --bs-border-radius-md: 0.375rem; } /* preload */ @@ -383,3 +386,74 @@ main { --bs-tooltip-bg: var(--bb-tooltip-dark); --bs-tooltip-color: var(--bb-tooltip-color-white); } + +/* button */ +.btn-xs { + --bs-btn-padding-y: 0.125rem; + --bs-btn-padding-x: 0.25rem; + --bs-btn-font-size: 0.75rem; + --bs-btn-border-radius: var(--bs-border-radius-sm); +} + +.btn-sm { + --bs-btn-padding-y: 0.25rem; + --bs-btn-padding-x: 0.5rem; + --bs-btn-font-size: 0.875rem; + --bs-btn-border-radius: var(--bs-border-radius-sm); +} + +.btn-md { + --bs-btn-padding-y: 0.375rem; + --bs-btn-padding-x: 0.75rem; + --bs-btn-font-size: 1rem; + --bs-btn-border-radius: var(--bs-border-radius-md); +} + +.btn-lg { + --bs-btn-padding-y: 0.5rem; + --bs-btn-padding-x: 1rem; + --bs-btn-font-size: 1.25rem; + --bs-btn-border-radius: var(--bs-border-radius-lg); +} +.btn-xl { + --bs-btn-padding-y: 0.625rem; + --bs-btn-padding-x: 1.25rem; + --bs-btn-font-size: 1.5rem; + --bs-btn-border-radius: var(--bs-border-radius-lg); +} + +/* button > spinner */ +.spinner-border-xs { + --bs-spinner-width: 0.5rem; + --bs-spinner-height: 0.5rem; + --bs-spinner-border-width: 0.125em; + --bs-spinner-vertical-align: 0; +} + +.spinner-border-sm { + --bs-spinner-width: 0.75rem; + --bs-spinner-height: 0.75rem; + --bs-spinner-border-width: 0.15em; + --bs-spinner-vertical-align: 0; +} + +.spinner-border-md { + --bs-spinner-width: 1rem; + --bs-spinner-height: 1rem; + --bs-spinner-border-width: 0.175em; + --bs-spinner-vertical-align: -0.125em; +} + +.spinner-border-lg { + --bs-spinner-width: 1.25rem; + --bs-spinner-height: 1.25rem; + --bs-spinner-border-width: 0.2em; + --bs-spinner-vertical-align: -0.125em; +} + +.spinner-border-xl { + --bs-spinner-width: 1.5rem; + --bs-spinner-height: 1.5rem; + --bs-spinner-border-width: 0.225em; + --bs-spinner-vertical-align: -0.125em; +}