From 4c5d18fca2d1f7688e0a0da0980c33788eca45ef Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sat, 2 Nov 2024 23:03:17 +0530 Subject: [PATCH 01/11] ThemeSwitcher updates --- .../Components/Layout/EmptyLayout.razor | 24 +---- .../Components/Layout/MainLayout.razor | 2 +- .../Components/Layout/MainLayout.razor.cs | 5 + .../Components/Layout/MainLayoutBase.cs | 16 ---- .../wwwroot/js/blazorbootstrap.demo.rcl.js | 92 ++++--------------- .../ThemeSwitcher/ThemeSwitcher.razor | 44 ++++----- .../ThemeSwitcher/ThemeSwitcher.razor.cs | 31 ++++++- .../ThemeSwitcher/ThemeSwitcherJsInterop.cs | 14 +-- .../blazor.bootstrap.theme-switcher.js | 58 ++++-------- 9 files changed, 104 insertions(+), 182 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor index c2ad8e129..03fd94491 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor @@ -67,28 +67,8 @@
-
  • - - +
  • +
    • diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor index 25b9d8b0a..7d7b4b923 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor @@ -3,7 +3,7 @@ - + GetNavItems() return navItems; } + + private void OnThemeChanged(string themeName) + { + JS.InvokeVoidAsync("updateDemoCodeThemeCss", themeName); + } } diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs index 92ce935ec..38c42ce5f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs @@ -20,14 +20,6 @@ public class MainLayoutBase : LayoutComponentBase [Inject] protected IJSRuntime JS { get; set; } = default!; - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - await JS.InvokeVoidAsync("initializeTheme"); - - await base.OnAfterRenderAsync(firstRender); - } - protected override void OnInitialized() { version = $"v{Configuration["version"]}"; // example: v0.6.1 @@ -43,14 +35,6 @@ protected override void OnInitialized() base.OnInitialized(); } - internal Task SetAutoTheme() => SetTheme("system"); - - internal Task SetDarkTheme() => SetTheme("dark"); - - internal Task SetLightTheme() => SetTheme("light"); - - internal async Task SetTheme(string themeName) => await JS.InvokeVoidAsync("setTheme", themeName); - internal virtual async Task Sidebar2DataProvider(Sidebar2DataProviderRequest request) { if (navItems is null) diff --git a/BlazorBootstrap.Demo.RCL/wwwroot/js/blazorbootstrap.demo.rcl.js b/BlazorBootstrap.Demo.RCL/wwwroot/js/blazorbootstrap.demo.rcl.js index 2414e3695..8067973d7 100644 --- a/BlazorBootstrap.Demo.RCL/wwwroot/js/blazorbootstrap.demo.rcl.js +++ b/BlazorBootstrap.Demo.RCL/wwwroot/js/blazorbootstrap.demo.rcl.js @@ -1,4 +1,9 @@ -async function copyToClipboard(text, dotNetHelper) { +/** + * Copies the provided text to the clipboard and invokes .NET methods based on the success or failure of the operation. + * @param {string} text - The text to be copied to the clipboard. + * @param {object} dotNetHelper - The .NET helper object to invoke methods on. + */ +async function copyToClipboard(text, dotNetHelper) { let isCopied = true; try { @@ -15,6 +20,10 @@ ); } +/** + * Highlights all code blocks on the page using the Prism.js library. + * If the Prism.js custom class plugin is available, it prefixes all classes with 'prism-'. + */ function highlightCode() { if (Prism) { Prism.plugins.customClass.prefix('prism-'); @@ -22,6 +31,10 @@ function highlightCode() { } }; +/** + * Scrolls the page to the heading element specified by the URL hash. + * If a hash is present in the URL, it finds the corresponding element by ID and scrolls it into view. + */ function navigateToHeading() { if (window.location.hash) { // get hash tag in URL @@ -34,78 +47,11 @@ function navigateToHeading() { } } -// THEMES -const STORAGE_KEY = "blazorbootstrap-theme"; -const DEFAULT_THEME = "light"; -const SYSTEM_THEME = "system"; - -const state = { - chosenTheme: SYSTEM_THEME, // light|dark|system - appliedTheme: DEFAULT_THEME // light|dark -}; - -const showActiveTheme = () => { - let $themeIndicator = document.querySelector(".blazorbootstrap-theme-indicator>i"); - if ($themeIndicator) { - if (state.appliedTheme === "light") { - $themeIndicator.className = "bi bi-sun-fill"; - } else if (state.appliedTheme === "dark") { - $themeIndicator.className = "bi bi-moon-stars-fill"; - } else { - $themeIndicator.className = "bi bi-circle-half"; - } - } - - let $themeSwitchers = document.querySelectorAll(".blazorbootstrap-theme-item>button"); - if ($themeSwitchers) { - $themeSwitchers.forEach((el) => { - const bsThemeValue = el.dataset.bsThemeValue; - const iEl = el.querySelector(".bi.bi-check2"); - if (state.chosenTheme === bsThemeValue) { - el.classList.add("active"); - if (iEl) - iEl.classList.remove("d-none"); - } else { - el.classList.remove("active"); - if (iEl) - iEl.classList.add("d-none"); - } - }); - } -}; - -function setTheme(theme, save = true) { - state.chosenTheme = theme; - state.appliedTheme = theme; - - if (theme === SYSTEM_THEME) { - state.appliedTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; - } - - document.documentElement.setAttribute("data-bs-theme", state.appliedTheme); - if (save) { - window.localStorage.setItem(STORAGE_KEY, state.chosenTheme); - } - showActiveTheme(); - updateDemoCodeThemeCss(state.appliedTheme); -}; - -function initializeTheme() { - const localTheme = window.localStorage.getItem(STORAGE_KEY); - if (localTheme) { - setTheme(localTheme, false); - } else { - setTheme(SYSTEM_THEME); - } -} - -window - .matchMedia("(prefers-color-scheme: dark)") - .addEventListener("change", (event) => { - const theme = event.matches ? "dark" : "light"; - setTheme(theme); - }); - +/** + * Update the theme of the demo code + * @param {} theme + * @returns {} + */ function updateDemoCodeThemeCss(theme) { if (theme === "dark") { let prismThemeLightLinkEl = document.getElementById('prismThemeLightLink'); diff --git a/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor b/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor index ebbd52192..62b5f29cf 100644 --- a/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor +++ b/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor @@ -1,24 +1,26 @@ @namespace BlazorBootstrap @inherits BlazorBootstrapComponentBase - -
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    \ No newline at end of file +
    + +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    \ No newline at end of file diff --git a/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor.cs b/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor.cs index 07ef82085..df25ac88a 100644 --- a/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor.cs +++ b/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor.cs @@ -2,21 +2,38 @@ public partial class ThemeSwitcher : BlazorBootstrapComponentBase { + + private DotNetObjectReference? objRef; + #region Methods + protected override Task OnInitializedAsync() + { + objRef ??= DotNetObjectReference.Create(this); + + return base.OnInitializedAsync(); + } + protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) - await ThemeSwitcherJsInterop.InitializeAsync(); + await ThemeSwitcherJsInterop.InitializeAsync(objRef); await base.OnAfterRenderAsync(firstRender); } - internal Task SetAutoTheme() => ThemeSwitcherJsInterop.SetAutoThemeAsync(); + internal Task SetAutoTheme() => ThemeSwitcherJsInterop.SetAutoThemeAsync(objRef); - internal Task SetDarkTheme() => ThemeSwitcherJsInterop.SetDarkThemeAsync(); + internal Task SetDarkTheme() => ThemeSwitcherJsInterop.SetDarkThemeAsync(objRef); - internal Task SetLightTheme() => ThemeSwitcherJsInterop.SetLightThemeAsync(); + internal Task SetLightTheme() => ThemeSwitcherJsInterop.SetLightThemeAsync(objRef); + + [JSInvokable] + public async Task OnThemeChangedJS(string themeName) + { + if (OnThemeChanged.HasDelegate) + await OnThemeChanged.InvokeAsync(themeName); + } #endregion @@ -25,4 +42,10 @@ protected override async Task OnAfterRenderAsync(bool firstRender) [Inject] private ThemeSwitcherJsInterop ThemeSwitcherJsInterop { get; set; } = default!; #endregion + + /// + /// Fired when the theme is changed. + /// + [Parameter] + public EventCallback OnThemeChanged { get; set; } } diff --git a/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcherJsInterop.cs b/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcherJsInterop.cs index 6bef7b702..e9e6f1d14 100644 --- a/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcherJsInterop.cs +++ b/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcherJsInterop.cs @@ -28,22 +28,22 @@ public async ValueTask DisposeAsync() } } - public async Task InitializeAsync() + public async Task InitializeAsync(DotNetObjectReference? objRef) { var module = await moduleTask.Value; - await module.InvokeVoidAsync("initializeTheme"); + await module.InvokeVoidAsync("initializeTheme", objRef); } - internal Task SetAutoThemeAsync() => SetThemeAsync("system"); + internal Task SetAutoThemeAsync(DotNetObjectReference? objRef) => SetThemeAsync(objRef, "system"); - internal Task SetDarkThemeAsync() => SetThemeAsync("dark"); + internal Task SetDarkThemeAsync(DotNetObjectReference? objRef) => SetThemeAsync(objRef, "dark"); - internal Task SetLightThemeAsync() => SetThemeAsync("light"); + internal Task SetLightThemeAsync(DotNetObjectReference? objRef) => SetThemeAsync(objRef, "light"); - internal async Task SetThemeAsync(string themeName) + internal async Task SetThemeAsync(DotNetObjectReference? objRef, string themeName) { var module = await moduleTask.Value; - await module.InvokeVoidAsync("setTheme", themeName); + await module.InvokeVoidAsync("setTheme", objRef, themeName); } #endregion diff --git a/blazorbootstrap/wwwroot/blazor.bootstrap.theme-switcher.js b/blazorbootstrap/wwwroot/blazor.bootstrap.theme-switcher.js index 67e9c9710..f3e89690c 100644 --- a/blazorbootstrap/wwwroot/blazor.bootstrap.theme-switcher.js +++ b/blazorbootstrap/wwwroot/blazor.bootstrap.theme-switcher.js @@ -1,6 +1,8 @@ // THEMES const STORAGE_KEY = "blazorbootstrap-theme"; const DEFAULT_THEME = "light"; +const LIGHT_THEME = "light"; +const DARK_THEME = "dark"; const SYSTEM_THEME = "system"; const state = { @@ -11,9 +13,14 @@ const state = { const showActiveTheme = () => { let $themeIndicator = document.querySelector(".blazorbootstrap-theme-indicator>i"); if ($themeIndicator) { - if (state.appliedTheme === "light") { + + if (state.chosenTheme === SYSTEM_THEME + && state.chosenTheme !== state.appliedTheme) { + $themeIndicator.className = "bi bi-circle-half"; + } + else if (state.appliedTheme === LIGHT_THEME) { $themeIndicator.className = "bi bi-sun-fill"; - } else if (state.appliedTheme === "dark") { + } else if (state.appliedTheme === DARK_THEME) { $themeIndicator.className = "bi bi-moon-stars-fill"; } else { $themeIndicator.className = "bi bi-circle-half"; @@ -38,12 +45,12 @@ const showActiveTheme = () => { } }; -export function setTheme(theme, save = true) { +export function setTheme(dotNetHelper, theme, save = true) { state.chosenTheme = theme; state.appliedTheme = theme; if (theme === SYSTEM_THEME) { - state.appliedTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + state.appliedTheme = window.matchMedia(`(prefers-color-scheme: ${DARK_THEME})`).matches ? DARK_THEME : LIGHT_THEME; } document.documentElement.setAttribute("data-bs-theme", state.appliedTheme); @@ -51,49 +58,24 @@ export function setTheme(theme, save = true) { window.localStorage.setItem(STORAGE_KEY, state.chosenTheme); } showActiveTheme(); - updateDemoCodeThemeCss(state.appliedTheme); + if (dotNetHelper) + dotNetHelper.invokeMethodAsync("OnThemeChangedJS", state.appliedTheme); }; -export function initializeTheme() { +export function initializeTheme(dotNetHelper) { const localTheme = window.localStorage.getItem(STORAGE_KEY); if (localTheme) { - setTheme(localTheme, false); + setTheme(dotNetHelper, localTheme, false); } else { - setTheme(SYSTEM_THEME); + setTheme(dotNetHelper, SYSTEM_THEME); } // register events window - .matchMedia("(prefers-color-scheme: dark)") + .matchMedia(`(prefers-color-scheme: ${DARK_THEME})`) .addEventListener("change", (event) => { - const theme = event.matches ? "dark" : "light"; - setTheme(theme); + //const theme = event.matches ? DARK_THEME : LIGHT_THEME; + //setTheme(theme); + setTheme(dotNetHelper, SYSTEM_THEME); }); } - -export function updateDemoCodeThemeCss(theme) { - if (theme === "dark") { - let prismThemeLightLinkEl = document.getElementById('prismThemeLightLink'); - if (prismThemeLightLinkEl) - prismThemeLightLinkEl?.remove(); - - let prismThemeDarkLinkEl = document.createElement("link"); - prismThemeDarkLinkEl.setAttribute("rel", "stylesheet"); - prismThemeDarkLinkEl.setAttribute("href", "/_content/BlazorBootstrap.Demo.RCL/css/prism-vsc-dark-plus.min.css"); - prismThemeDarkLinkEl.setAttribute("id", "prismThemeDarkLink"); - - document.head.append(prismThemeDarkLinkEl); - } - else if (theme === "light") { - let prismThemeDarkLinkEl = document.getElementById('prismThemeDarkLink'); - if (prismThemeDarkLinkEl) - prismThemeDarkLinkEl?.remove(); - - let prismThemeLightLinkEl = document.createElement("link"); - prismThemeLightLinkEl.setAttribute("rel", "stylesheet"); - prismThemeLightLinkEl.setAttribute("href", "/_content/BlazorBootstrap.Demo.RCL/css/prism-vs.min.css"); - prismThemeLightLinkEl.setAttribute("id", "prismThemeLightLink"); - - document.head.append(prismThemeLightLinkEl); - } -} \ No newline at end of file From 48177db2f41bd5ab9da088369746d707392328ba Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Sun, 3 Nov 2024 17:29:47 +0530 Subject: [PATCH 02/11] MainLayout and ThemeSwitcher updates --- .../Components/Layout/MainLayout.razor | 27 +++++++++++++-- .../ThemeSwitcher/ThemeSwitcher.razor | 4 +-- .../ThemeSwitcher/ThemeSwitcher.razor.cs | 33 +++++++++++-------- 3 files changed, 46 insertions(+), 18 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor index 7d7b4b923..bd03d2ce0 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor @@ -3,7 +3,30 @@ - +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    + + + +
    +
    +
    +
    +     + WidthUnit="Unit.Px" /> diff --git a/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor b/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor index 62b5f29cf..cc8ff6d09 100644 --- a/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor +++ b/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor @@ -1,10 +1,10 @@ @namespace BlazorBootstrap @inherits BlazorBootstrapComponentBase -
    + @code { - private string pageUrl = "/utils/color-utility"; - private string title = "Blazor Bootstrap Color Utils"; - private string description = "For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations."; - private string imageUrl = "https://i.imgur.com/VRglJqU.jpg"; // TODO: update this + private const string pageUrl = RouteConstants.Demos_ColorUtils_Documentation; + private const string pageTitle = "Blazor Bootstrap Color Utils"; + private const string pageDescription = "For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations."; + private const string metaTitle = "Blazor Bootstrap Color Utils"; + private const string metaDescription = "For data visualization, you can use the predefined palettes ColorBuilder.CategoricalTwelveColors for a 12-color palette and ColorBuilder.CategoricalSixColors for a 6-color palette. These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations."; + private const string imageUrl = "https://i.imgur.com/VRglJqU.jpg"; // TODO: update this } diff --git a/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs b/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs index 59aef9205..077fae2a8 100644 --- a/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs +++ b/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs @@ -4,10 +4,13 @@ public static class RouteConstants { public const string Blog_Prefix = "/blog"; public const string Docs_Prefix = "/docs"; - public const string Demos_Prefix = "/demos"; + public const string Demos_Prefix = ""; #region Demos + // Getting Started + public const string Demos_GettingStarted_Documentation = Demos_Prefix + "/getting-started"; + // AI public const string Demos_AI_Prefix = Demos_Prefix + "/ai"; public const string Demos_AI_Chat_Documentation = Demos_AI_Prefix + "/open-ai-chat"; @@ -90,7 +93,8 @@ public static class RouteConstants public const string Demos_ScatterChart_Documentation = Demos_Charts_Prefix + "/scatter-chart"; // Services - public const string Demos_ModalService_Documentation = Demos_Prefix + "/modal-service"; + public const string Demos_Services_Prefix = Demos_Prefix + "/services"; + public const string Demos_ModalService_Documentation = Demos_Services_Prefix + "/modal-service"; // Utilities public const string Demos_Utils_Prefix = Demos_Prefix + "/utils"; From 8fbcb9e07e1f16969d65fec95fdbbad1723f084d Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Mon, 4 Nov 2024 22:58:42 +0530 Subject: [PATCH 08/11] Demo.RCL - Sections updated --- .../Pages/Buttons/ButtonDocumentation.razor | 162 ++++++----- .../Pages/Callout/CalloutDocumentation.razor | 20 +- .../Pages/Card/CardDocumentation.razor | 168 ++++++------ .../Carousel/CarouselDocumentation.razor | 127 +++++---- .../BarCharts/BarChartDocumentation.razor | 12 +- .../Pages/Charts/ChartsDocumentation.razor | 49 ++-- .../DoughnutChartDocumentation.razor | 33 +-- .../LineCharts/LineChartDocumentation.razor | 77 +++--- .../PieCharts/PieChartDocumentation.razor | 50 ++-- .../PolarAreaChartDocumentation.razor | 28 +- .../RadarCharts/RadarChartDocumentation.razor | 28 +- .../ScatterChartDocumentation.razor | 43 +-- .../Collapse/CollapseDocumentation.razor | 64 ++--- .../ConfirmDialogDocumentation.razor | 103 +++---- .../Dropdowns/DropdownDocumentation.razor | 254 +++++++++--------- .../AutoCompleteDocumentation.razor | 82 +++--- .../CurrencyInputDocumentation.razor | 149 +++++----- .../DateInput/DateInputDocumentation.razor | 107 ++++---- .../NumberInputDocumentation.razor | 93 ++++--- .../RangeInput/RangeInputDocumentation.razor | 83 +++--- .../Form/Switch/SwitchDocumentation.razor | 55 ++-- .../TimeInput/TimeInputDocumentation.razor | 101 +++---- .../GettingStartedDocumentation.razor | 47 ++-- .../Grid_Overview_Documentation.razor | 10 +- .../Grid_DataBinding_Documentation.razor | 32 +-- .../Grid_Filters_Documentation.razor | 85 +++--- .../04-paging/Grid_Paging_Documentation.razor | 36 +-- .../Grid_Sorting_Documentation.razor | 29 +- .../Grid_Selection_Documentation.razor | 66 ++--- .../Grid_Alignment_Documentation.razor | 14 +- .../Grid_GridSettings_Documentation.razor | 11 +- .../Grid_CustomCSSClass_Documentation.razor | 43 +-- .../10-events/Grid_Events_Documentation.razor | 14 +- .../Grid_Translations_Documentation.razor | 7 +- .../Grid_FixedHeader_Documentation.razor | 18 +- .../Grid_FreezeColumns_Documentation.razor | 17 +- .../Grid_DetailView_Documentation.razor | 14 +- .../Grid_Nested_Documentation.razor | 7 +- .../99-other/Grid_Other_Documentation.razor | 45 ++-- .../Pages/Icons/IconDocumentation.razor | 94 ++++--- .../Pages/Images/ImageDocumentation.razor | 31 ++- .../server/LayoutServerDocumentation.razor | 38 +-- .../LayoutWebAssemblyDocumentation.razor | 38 +-- .../Pages/Maps/GoogleMapDocumentation.razor | 94 ++++--- .../Markdown/MarkdownDocumentation.razor | 204 +++++++------- .../Pages/Modal/ModalDocumentation.razor | 95 ++++--- .../Offcanvas/OffcanvasDocumentation.razor | 79 +++--- .../Pagination/PaginationDocumentation.razor | 44 +-- .../PdfViewer/PdfViewerDocumentation.razor | 29 +- .../PlaceholderDocumentation.razor | 52 ++-- .../Pages/Preload/PreloadDocumentation.razor | 56 ++-- .../Progress/ProgressDocumentation.razor | 66 +++-- .../Pages/Ribbon/RibbonDocumentation.razor | 20 +- .../ScriptLoaderDocumentation.razor | 42 +-- .../ModalServiceDocumentation.razor | 41 +-- .../Pages/Sidebar/SidebarDocumentation.razor | 77 +++--- .../Sidebar2/Sidebar2Documentation.razor | 61 +++-- .../SortableListDocumentation.razor | 127 +++++---- .../Spinners/SpinnersDocumentation.razor | 80 +++--- .../Pages/Tabs/TabsDocumentation.razor | 164 ++++++----- .../Pages/Toasts/ToastsDocumentation.razor | 84 +++--- .../Tooltips/TooltipsDocumentation.razor | 48 ++-- .../ColorUtil/ColorUtilDocumentation.razor | 18 +- 63 files changed, 2214 insertions(+), 1851 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor index 70447a4ac..70b8fea47 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor @@ -11,80 +11,94 @@ - -
    Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
    - - - - - - - - - - Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. - - - -
    Fancy larger or smaller buttons? Add Size="ButtonSize.Large" or Size="ButtonSize.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.
    - - - Disabled buttons using the Type="ButtonType.Link" parameter behave a bit different. - - - - - - - - - - - - - - - - - - - -
    Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
    - - - - - - -
    - Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. -
    - - - - - - -
    - Blazor Bootstrap includes several predefined tooltip styles, each serving its own semantic purpose. - The TooltipColor parameter can be used to customize the color of the tooltip. -
    - - - - Support for HTML tooltips is not available at this moment. - - - - - - +
    +
    Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
    + +
    + +
    + +
    + +
    + + + + Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast. + +
    + +
    +
    Fancy larger or smaller buttons? Add Size="ButtonSize.Large" or Size="ButtonSize.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.
    + + + Disabled buttons using the Type="ButtonType.Link" parameter behave a bit different. + + + + +
    + +
    + +
    + +
    + + + + +
    + +
    + + +
    + +
    +
    Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
    + +
    + +
    + +
    + +
    +
    + Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. +
    + +
    + +
    + +
    + +
    +
    + Blazor Bootstrap includes several predefined tooltip styles, each serving its own semantic purpose. + The TooltipColor parameter can be used to customize the color of the tooltip. +
    + + + + Support for HTML tooltips is not available at this moment. + +
    + +
    + + + +
    @code { private const string pageUrl = RouteConstants.Demos_Buttons_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor index 4f8d07e87..aca503ca1 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor @@ -11,17 +11,21 @@ - - +
    + +
    - - +
    + +
    - - +
    + +
    - - +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Callout_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor index a1ff52e0b..0c965be1d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor @@ -11,83 +11,97 @@ - -
    - A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. -
    - - -
    - Below is an example of a basic card with mixed content and a fixed width. - Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. -
    - - - -
    - Cards support a wide variety of content, including images, text, list groups, links, and more. - Below are examples of what’s supported. -
    - - -
    - The building block of a card is the CardBody. Use it whenever you need a padded section within a card. -
    - - - - - - - - - -
    - Create lists of content in a card with a flush list group. -
    - - - -
    - Mix and match multiple content types to create the card you need, or throw everything in there. - Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. -
    - - - -
    - Add an optional header and/or footer within a card. -
    - - - -
    - Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. - You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities. -
    - - - -
    - You can quickly change the text alignment of any card—in its entirety or specific parts—with our TextAlignment parameter. -
    - - - - - - -
    - Use card groups to render cards as a single, attached element with equal width and height columns. - Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint. -
    - - - -
    - When using card groups with footers, their content will automatically line up. -
    - +
    +
    + A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. +
    +
    + +
    +
    + Below is an example of a basic card with mixed content and a fixed width. + Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. +
    + +
    + +
    +
    + Cards support a wide variety of content, including images, text, list groups, links, and more. + Below are examples of what’s supported. +
    +
    + +
    +
    + The building block of a card is the CardBody. Use it whenever you need a padded section within a card. +
    + +
    + +
    + +
    + +
    + +
    + +
    +
    + Create lists of content in a card with a flush list group. +
    + +
    + +
    +
    + Mix and match multiple content types to create the card you need, or throw everything in there. + Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. +
    + +
    + +
    +
    + Add an optional header and/or footer within a card. +
    + +
    + +
    +
    + Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. + You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities. +
    + +
    + +
    +
    + You can quickly change the text alignment of any card—in its entirety or specific parts—with our TextAlignment parameter. +
    + +
    + +
    + +
    + +
    +
    + Use card groups to render cards as a single, attached element with equal width and height columns. + Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint. +
    + +
    + +
    +
    + When using card groups with footers, their content will automatically line up. +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Card_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor index 5e51dbf0a..a4a401396 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor @@ -11,73 +11,81 @@ - -
    Here is a basic example of a carousel with three slides.
    - +
    +
    Here is a basic example of a carousel with three slides.
    + +
    - -
    - You can add indicators to the carousel, alongside the previous/next controls. - The indicators allow users to jump directly to a particular slide. - Set ShowIndicators to true to show the indicators. -
    - +
    +
    + You can add indicators to the carousel, alongside the previous/next controls. + The indicators allow users to jump directly to a particular slide. + Set ShowIndicators to true to show the indicators. +
    + +
    - -
    - You can add captions to your slides with the CarouselCaption component within any CarouselItem. - They can be easily hidden on smaller viewports. -
    - +
    +
    + You can add captions to your slides with the CarouselCaption component within any CarouselItem. + They can be easily hidden on smaller viewports. +
    + +
    - -
    - To animate slides with a fading transition instead of sliding, set Crossfade to true. -
    - +
    +
    + To animate slides with a fading transition instead of sliding, set Crossfade to true. +
    + +
    - -
    - You can make your carousels autoplay on page load by setting the Autoplay parameter to CarouselAutoPlay.StartOnPageLoad. - Autoplaying carousels automatically pause while hovered with the mouse. -
    - -
    - When the Autoplay parameter is set to CarouselAutoPlay.StartAfterUserInteraction, the carousel won’t automatically start to cycle on page load. - Instead, it will only start after the first user interaction. -
    - +
    +
    + You can make your carousels autoplay on page load by setting the Autoplay parameter to CarouselAutoPlay.StartOnPageLoad. + Autoplaying carousels automatically pause while hovered with the mouse. +
    + +
    + When the Autoplay parameter is set to CarouselAutoPlay.StartAfterUserInteraction, the carousel won’t automatically start to cycle on page load. + Instead, it will only start after the first user interaction. +
    + +
    - -
    - Add Interval parameter to a CarouselItem component to change the amount of time to delay between automatically cycling to the next item. -
    - +
    +
    + Add Interval parameter to a CarouselItem component to change the amount of time to delay between automatically cycling to the next item. +
    + +
    - -
    - Hide the controls by setting ShowPreviousNextControls parameter to false. -
    - +
    +
    + Hide the controls by setting ShowPreviousNextControls parameter to false. +
    + +
    - -
    - Carousels support swiping left/right on touchscreen devices to move between slides. - This can be disabled by setting the Touch option to false. -
    - +
    +
    + Carousels support swiping left/right on touchscreen devices to move between slides. + This can be disabled by setting the Touch option to false. +
    + +
    - -
    - Blazor Bootstrap Carousel component exposes a two events for hooking into Carousel functionality. - - +
    +
    + Blazor Bootstrap Carousel component exposes a two events for hooking into Carousel functionality. +
    + - - + + @@ -86,10 +94,11 @@ - -
    Event Name Description
    Onslide Fires immediately when the slide instance method is invoked.Onslid Fired when the carousel has completed its slide transition.
    -
    - + + +
    + + NOTE: All of the images were generated using Microsoft Designer. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor index dfe93ffdd..473156efa 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor @@ -11,12 +11,12 @@ - +
    Refer to the getting started guide for setting up charts.
    - +
    In the following example, a categorical 12-color palette is used.
    @@ -26,20 +26,20 @@ - +
    - +
    - +
    By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE).
    - +
    @code { diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor index 08262de8b..cddc32ab5 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor @@ -11,29 +11,32 @@ - - - - -
    At this moment we are supporting seven blazor chart types.
    -
      -
    1. Bar Chart
      2. -
    2. Doughnut Chart
      3. -
    3. Line Chart
      4. -
    4. Pie Chart
      5. -
    5. Polar Area Chart
      6. -
    6. Radar Chart
      7. -
    7. Scatter Chart
      8. -
    - - - We will add Bubble Chart and Mixed Chart support in the subsequent versions. - - - -
    - Refer to the getting started guide for setting up charts. -
    +
    + +
    + +
    +
    At this moment we are supporting seven blazor chart types.
    +
      +
    1. Bar Chart
      2. +
    2. Doughnut Chart
      3. +
    3. Line Chart
      4. +
    4. Pie Chart
      5. +
    5. Polar Area Chart
      6. +
    6. Radar Chart
      7. +
    7. Scatter Chart
      8. +
    + + + We will add Bubble Chart and Mixed Chart support in the subsequent versions. + +
    + +
    +
    + Refer to the getting started guide for setting up charts. +
    +
    @code { private const string pageUrl = RouteConstants.Demos_Charts_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor index 67b387f3c..b1578587d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor @@ -11,23 +11,26 @@ - -
    - Refer to the getting started guide for setting up charts. -
    +
    +
    + Refer to the getting started guide for setting up charts. +
    +
    - -
    - In the following example, a categorical 12-color palette is used. -
    - - For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette. - These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. - - +
    +
    + In the following example, a categorical 12-color palette is used. +
    + + For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + +
    - - +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_DoughnutChart_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor index dec2f0db9..58310b6d7 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor @@ -11,41 +11,48 @@ - -
    - Refer to the getting started guide for setting up charts. -
    - - -
    - In the following example, a categorical 12-color palette is used. -
    - - For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette. - These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. - - -
    - - - -
    - By default, the chart is using the default locale of the platform on which it is running. - In the following example, you will see the chart in the German locale (de_DE). -
    - - - - - - - - - - - - - +
    +
    + Refer to the getting started guide for setting up charts. +
    +
    + +
    +
    + In the following example, a categorical 12-color palette is used. +
    + + For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + +
    + +
    + +
    +
    + By default, the chart is using the default locale of the platform on which it is running. + In the following example, you will see the chart in the German locale (de_DE). +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_LineChart_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor index 2568e9a88..997e395bb 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor @@ -11,29 +11,33 @@ - -
    - Refer to the getting started guide for setting up charts. -
    - - -
    - In the following example, a categorical 12-color palette is used. -
    - - For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette. - These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. - - - - - - - -
    - This sample demonstrates how to change the position of the chart legend. -
    - +
    +
    + Refer to the getting started guide for setting up charts. +
    +
    + +
    +
    + In the following example, a categorical 12-color palette is used. +
    + + For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + +
    + +
    + +
    + +
    +
    + This sample demonstrates how to change the position of the chart legend. +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_PieChart_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor index cd9ec0226..ee00dea82 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor @@ -11,20 +11,22 @@ - -
    - Refer to the getting started guide for setting up charts. -
    +
    +
    + Refer to the getting started guide for setting up charts. +
    +
    - -
    - In the following example, a categorical 12-color palette is used. -
    - - For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette. - These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. - - +
    +
    + In the following example, a categorical 12-color palette is used. +
    + + For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + +
    @code { private const string pageUrl = RouteConstants.Demos_PolarAreaChart_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor index 143ffa262..55e7d6fba 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor @@ -11,20 +11,22 @@ - -
    - Refer to the getting started guide for setting up charts. -
    +
    +
    + Refer to the getting started guide for setting up charts. +
    +
    - -
    - In the following example, a categorical 12-color palette is used. -
    - - For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette. - These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. - - +
    +
    + In the following example, a categorical 12-color palette is used. +
    + + For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + +
    @code { private const string pageUrl = RouteConstants.Demos_RadarChart_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor index a10918a2a..52635f66c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor @@ -11,28 +11,31 @@ - -
    - Refer to the getting started guide for setting up charts. -
    +
    +
    + Refer to the getting started guide for setting up charts. +
    +
    - -
    - In the following example, a categorical 12-color palette is used. -
    - - For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette. - These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. - - +
    +
    + In the following example, a categorical 12-color palette is used. +
    + + For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette. + These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations. + + +
    - -
    - In the following example, you can randomize the data and datasets dynamically. - Along with this, the ScatterChartOptions are updated. With these changes, the scatter chart is responsive, and when hovered over, the points' radius increases for better visibility to the end-user. - Additionally, the data is grouped and displayed in a tooltip by index. -
    - +
    +
    + In the following example, you can randomize the data and datasets dynamically. + Along with this, the ScatterChartOptions are updated. With these changes, the scatter chart is responsive, and when hovered over, the points' radius increases for better visibility to the end-user. + Additionally, the data is grouped and displayed in a tooltip by index. +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_ScatterChart_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor index 95c44503b..933bbef86 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor @@ -11,40 +11,43 @@ - -
    - The Collapse component is used to show and hide content. Use ShowAsync, HideAsync, and ToggleAsync methods to toggle the content. - Collapsing an element will animate the height from its current value to 0. -
    +
    +
    + The Collapse component is used to show and hide content. Use ShowAsync, HideAsync, and ToggleAsync methods to toggle the content. + Collapsing an element will animate the height from its current value to 0. +
    - - The animation effect of this component is dependent on the prefers-reduced-motion media query.
    - See the reduced motion section of our accessibility documentation. -     + + The animation effect of this component is dependent on the prefers-reduced-motion media query.
    + See the reduced motion section of our accessibility documentation. +     +
    - -
    - Click the buttons below to show and hide the content. -
    - +
    +
    + Click the buttons below to show and hide the content. +
    + +
    - -
    - The Collapse component supports horizontal collapsing. Set the Horizontal parameter to true to enable horizontal collapsing. -
    - +
    +
    + The Collapse component supports horizontal collapsing. Set the Horizontal parameter to true to enable horizontal collapsing. +
    + +
    - -
    - Blazor Bootstrap Collapse component exposes a few events for hooking into collapse functionality. - - +
    +
    + Blazor Bootstrap Collapse component exposes a few events for hooking into collapse functionality. +
    + - - + + @@ -61,10 +64,11 @@ - -
    Event Name Description
    OnHiding This event is fired immediately when the hide method has been called.OnShown This event is fired when a collapse component has been made visible to the user (will wait for CSS transitions to complete).
    -
    - + + + + +
    @code { private const string pageUrl = RouteConstants.Demos_Collapse_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor index b322a892e..1156663f5 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor @@ -11,60 +11,67 @@ - -
    - +
    +
    + +
    - -
    - Render different components dynamically within the confirm dialog without iterating through possible types or using conditional logic. -
    -
    - If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. -
    -
    - In the below example, we used Toast Service to show the user confirmation. -
    - -EmployeeDemoComponent.razor - +
    +
    + Render different components dynamically within the confirm dialog without iterating through possible types or using conditional logic. +
    +
    + If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. +
    +
    + In the below example, we used Toast Service to show the user confirmation. +
    + + EmployeeDemoComponent.razor + +
    - -
    - Use ConfirmDialogOptions to change the text and color of the button. -
    - +
    +
    + Use ConfirmDialogOptions to change the text and color of the button. +
    + +
    - -
    - Confirm dialog have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. -
    - +
    +
    + Confirm dialog have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. +
    + +
    - -
    - When dialogs become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean. -
    - -
    You can also create a scrollable dialog that allows scroll the dialog body by updating DialogOptions.IsScrollable="true".
    - +
    +
    + When dialogs become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean. +
    + +
    You can also create a scrollable dialog that allows scroll the dialog body by updating DialogOptions.IsScrollable="true".
    + +
    - -
    - Add DialogOptions.IsVerticallyCentered="true" to vertically center the confirm dialog. -
    - -
    - +
    +
    + Add DialogOptions.IsVerticallyCentered="true" to vertically center the confirm dialog. +
    + +
    + +
    - - - By default, auto focus on the "Yes" button is enabled. - -
    - To disabe the autofocus, set AutoFocusYesButton = false on the ConfirmDialogOptions. -
    - +
    + + By default, auto focus on the "Yes" button is enabled. + +
    + To disabe the autofocus, set AutoFocusYesButton = false on the ConfirmDialogOptions. +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_ConfirmDialog_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor index d7fa538db..61d3dd60c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor @@ -11,114 +11,124 @@ - - - - - - - - - - - - - - - - -
    - To trigger DropdownMenu above elements, add the Direction="DropdownDirection.Dropup" to the Dropdown component. -
    - - - -
    - To center the DropdownMenu above the toggle, add the Direction="DropdownDirection.DropupCentered" to the Dropdown component. -
    - - - -
    - To trigger DropdownMenu at the right of elements, add the Direction="DropdownDirection.Dropend" to the Dropdown component. -
    - - - -
    - To trigger DropdownMenu at the left of elements, you can add the Direction="DropdownDirection.Dropstart" to the Dropdown component. -
    - - - -
    - To style DropdownItem as active, add the Active="true" parameter to the DropdownItem element in the DropdownMenu. -
    - - - -
    - To disable the dropdown, set the Disabled parameter to true on the Dropdown component. -
    - -
    - To style a dropdown item as disabled, set the Disabled parameter to true on the DropdownItem element in the DropdownMenu component. -
    - - - -
    -

    - By default, a DropdownMenu is automatically positioned at 100% from the top and along the left side of its parent. - You can change this with the Position parameter. -

    -

    - To right-align a DropdownMenu, add the Position="DropdownMenuPosition.End" parameter to the DropdownMenu component. - Directions are mirrored when using Bootstrap in RTL. -

    -
    - - - - - -
    Add a header to label sections of actions in any dropdown menu.
    - - - -
    Separate groups of related menu items with a divider.
    - - - -
    - Place any freeform text within a dropdown menu with text and use spacing utilities. - Note that youll likely need additional sizing styles to constrain the menu width. -
    - - - -
    - Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require. -
    - - - -
    - By default, the DropdownMenu is closed when clicking either inside or outside the DropdownMenu. - You can use the AutoClose and AutoCloseBehavior parameters to change this behavior of the Dropdown. -
    - - - -
    - - +
    + +
    + +
    + +
    + +
    + +
    + +
    + + +
    + +
    +
    +
    + To trigger DropdownMenu above elements, add the Direction="DropdownDirection.Dropup" to the Dropdown component. +
    + +
    +
    +
    + To center the DropdownMenu above the toggle, add the Direction="DropdownDirection.DropupCentered" to the Dropdown component. +
    + +
    +
    +
    + To trigger DropdownMenu at the right of elements, add the Direction="DropdownDirection.Dropend" to the Dropdown component. +
    + +
    +
    +
    + To trigger DropdownMenu at the left of elements, you can add the Direction="DropdownDirection.Dropstart" to the Dropdown component. +
    + +
    +
    +
    + To style DropdownItem as active, add the Active="true" parameter to the DropdownItem element in the DropdownMenu. +
    + +
    +
    +
    + To disable the dropdown, set the Disabled parameter to true on the Dropdown component. +
    + +
    + To style a dropdown item as disabled, set the Disabled parameter to true on the DropdownItem element in the DropdownMenu component. +
    + +
    + +
    +
    +

    + By default, a DropdownMenu is automatically positioned at 100% from the top and along the left side of its parent. + You can change this with the Position parameter. +

    +

    + To right-align a DropdownMenu, add the Position="DropdownMenuPosition.End" parameter to the DropdownMenu component. + Directions are mirrored when using Bootstrap in RTL. +

    +
    + +
    + +
    + +
    +
    Add a header to label sections of actions in any dropdown menu.
    + +
    + +
    +
    Separate groups of related menu items with a divider.
    + +
    + +
    +
    + Place any freeform text within a dropdown menu with text and use spacing utilities. + Note that youll likely need additional sizing styles to constrain the menu width. +
    + +
    + +
    +
    + Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require. +
    + +
    + +
    +
    + By default, the DropdownMenu is closed when clicking either inside or outside the DropdownMenu. + You can use the AutoClose and AutoCloseBehavior parameters to change this behavior of the Dropdown. +
    + +
    + +
    +
    +
    + - - + + @@ -135,23 +145,24 @@ - -
    Method Description
    HideAsync Hides the dropdown menu of a given navbar or tabbed navigation.UpdateAsync Updates the position of an element’s dropdown.
    -
    - - - -
    - All dropdown events are fired at the toggling element and then bubbled up. - - - + +
    +
    + +
    + +
    +
    + All dropdown events are fired at the toggling element and then bubbled up. + + + - - + + @@ -168,10 +179,11 @@ - -
    Event type Description
    OnHiding This event is fired immediately when the hide method has been called.OnShown This event is fired when an dropdown element has been made visible to the user (will wait for CSS transitions to complete).
    -
    - + + + + +
    @code { private const string pageUrl = RouteConstants.Demos_Dropdown_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor index e03ced5ea..82219fbc3 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor @@ -13,39 +13,44 @@ - - +
    + +
    - -
    In the below example, StringComparision.Ordinal is used to make the filter case-sensitive.
    - - -
    By default, StringComparison.OrdinalIgnoreCase is used to compare culture-agnostic and case-insensitive string matching.
    -     +
    +
    In the below example, StringComparision.Ordinal is used to make the filter case-sensitive.
    + + +
    By default, StringComparison.OrdinalIgnoreCase is used to compare culture-agnostic and case-insensitive string matching.
    +     +
    - - +
    + +
    - - +
    + +
    - - +
    + +
    - -
    - Blazor Bootstrap autocomplete component supports the following keyboard shortcuts to initiate various actions. -
    -
    -
    - - +
    +
    + Blazor Bootstrap autocomplete component supports the following keyboard shortcuts to initiate various actions. +
    +
    +
    +
    + - - + + @@ -70,22 +75,25 @@ - -
    Key Description
    Esc Closes the popup list when it is in an open state.Enter Selects the currently focused item.
    + + +
    - +
    - -
    Use the Disabled parameter to disable the AutoComplete.
    - -
    Also, use Enable() and Disable() methods to enable and disable the AutoComplete.
    - - Do not use both the Disabled parameter and Enable() & Disable() methods. - - +
    +
    Use the Disabled parameter to disable the AutoComplete.
    + +
    Also, use Enable() and Disable() methods to enable and disable the AutoComplete.
    + + Do not use both the Disabled parameter and Enable() & Disable() methods. + + +
    - - +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_AutoComplete_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor index acef3d8ce..19cccaf9c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor @@ -13,74 +13,87 @@ - -
    By default, e + - are blocked. For all integral numeric types, dot . is blocked.
    - - The default locale is en-US. - - - - - - - -
    Set HideCurrencySymbol parameter value to true to hide the currency symbol.
    - - - -
    In the below example, formatting adds zeros to display minimum integers and fractions.
    - - MinimumFractionDigits and MaximumFractionDigits parameters are applicable for floating-point numeric types only. - - - - -
    In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. You can enable this formatting by setting the CurrencySign option to Accounting. The default value is Standard.
    - - - -
    CurrencyInput is a generic component. Always specify the exact type. In the below example TValue is set to int, int?, float, float?, double, double?, decimal, and decimal?.
    - - - -
    Set EnableMinMax="true" and set the Min and Max parameters to restrict the user input between the Min and Max range.
    - - If the user tries to enter a number in the CurrencyInput field which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the Min value, then it will override with the Min value. - If the user input exceeds the Max value, it will override with the Max value. - - - - -
    You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.
    - - - -
    By default, negative numbers are not allowed. Set the AllowNegativeNumbers parameter to true to allow the negative numbers.
    - - - -
    Use the Disabled parameter to disable the CurrencyInput.
    - -
    Also, use Enable() and Disable() methods to enable and disable the CurrencyInput.
    - - Do not use both the Disabled parameter and Enable() & Disable() methods. - - - - -
    - Like any other blazor input components, CurrencyInput supports validations. - Add the DataAnnotations on the CurrencyInput component to validate the user input before submitting the form. - In the below example, we used Required and Range attributes. -
    - - - - - - -
    This event fires on every user keystroke that changes the CurrencyInput value.
    - +
    +
    By default, e + - are blocked. For all integral numeric types, dot . is blocked.
    + + The default locale is en-US. + + +
    + +
    + +
    + +
    +
    Set HideCurrencySymbol parameter value to true to hide the currency symbol.
    + +
    + +
    +
    In the below example, formatting adds zeros to display minimum integers and fractions.
    + + MinimumFractionDigits and MaximumFractionDigits parameters are applicable for floating-point numeric types only. + + +
    + +
    +
    In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. You can enable this formatting by setting the CurrencySign option to Accounting. The default value is Standard.
    + +
    + +
    +
    CurrencyInput is a generic component. Always specify the exact type. In the below example TValue is set to int, int?, float, float?, double, double?, decimal, and decimal?.
    + +
    + +
    +
    Set EnableMinMax="true" and set the Min and Max parameters to restrict the user input between the Min and Max range.
    + + If the user tries to enter a number in the CurrencyInput field which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the Min value, then it will override with the Min value. + If the user input exceeds the Max value, it will override with the Max value. + + +
    + +
    +
    You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.
    + +
    + +
    +
    By default, negative numbers are not allowed. Set the AllowNegativeNumbers parameter to true to allow the negative numbers.
    + +
    + +
    +
    Use the Disabled parameter to disable the CurrencyInput.
    + +
    Also, use Enable() and Disable() methods to enable and disable the CurrencyInput.
    + + Do not use both the Disabled parameter and Enable() & Disable() methods. + + +
    + +
    +
    + Like any other blazor input components, CurrencyInput supports validations. + Add the DataAnnotations on the CurrencyInput component to validate the user input before submitting the form. + In the below example, we used Required and Range attributes. +
    + +
    + +
    + +
    + +
    +
    This event fires on every user keystroke that changes the CurrencyInput value.
    + +
    @code { private const string pageUrl = RouteConstants.Demos_CurrencyInput_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor index 30433732a..b0769c6fd 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor @@ -13,63 +13,70 @@ - - - The input UI generally varies from browser to browser. - In unsupported browsers, the control degrades gracefully to type="text". - +
    + + The input UI generally varies from browser to browser. + In unsupported browsers, the control degrades gracefully to type="text". + - + +
    - -
    -

    - The Blazor Bootstrap DateInput component supports several data types: DateOnly, DateOnly?, DateTime, and DateTime?. - This allows flexible component usage to accommodate various data types in Blazor applications. -

    -

    - In the below example, TValue is set to DateOnly, DateOnly?, DateTime, and DateTime?. -

    -
    - +
    +
    +

    + The Blazor Bootstrap DateInput component supports several data types: DateOnly, DateOnly?, DateTime, and DateTime?. + This allows flexible component usage to accommodate various data types in Blazor applications. +

    +

    + In the below example, TValue is set to DateOnly, DateOnly?, DateTime, and DateTime?. +

    +
    + +
    - -
    - Set EnableMinMax="true" and set the Max and Min parameters to restrict the user input between the Min and Max range. -
    - - If the user tries to enter a number in the DateInput field which is out of range, then it will override with Max or Min value based on the context. - If the user input exceeds the Max value, it will override with the Max value. If the user input is less than the Min value, then it will override with the Min value. - - +
    +
    + Set EnableMinMax="true" and set the Max and Min parameters to restrict the user input between the Min and Max range. +
    + + If the user tries to enter a number in the DateInput field which is out of range, then it will override with Max or Min value based on the context. + If the user input exceeds the Max value, it will override with the Max value. If the user input is less than the Min value, then it will override with the Min value. + + +
    - -
    Use the Disabled parameter to disable the DateInput.
    - -
    Also, use Enable() and Disable() methods to enable and disable the DateInput.
    - - Do not use both the Disabled parameter and Enable() & Disable() methods. - - +
    +
    Use the Disabled parameter to disable the DateInput.
    + +
    Also, use Enable() and Disable() methods to enable and disable the DateInput.
    + + Do not use both the Disabled parameter and Enable() & Disable() methods. + + +
    - -
    - Like any other blazor input component, DateInput component supports validations. Use the DataAnnotations to validate the user input before submitting the form. In the below example, we used the Required attributes. -
    - +
    +
    + Like any other blazor input component, DateInput component supports validations. Use the DataAnnotations to validate the user input before submitting the form. In the below example, we used the Required attributes. +
    + +
    - -
    - This event fires on every user keystroke/selection that changes the DateInput value. -
    - +
    +
    + This event fires on every user keystroke/selection that changes the DateInput value. +
    + +
    - -
    - One common scenario is that the date fields are restricted based on the entry in another date field. - In the example below, we restrict the course end time based on the selection of course start date. -
    - +
    +
    + One common scenario is that the date fields are restricted based on the entry in another date field. + In the example below, we restrict the course end time based on the selection of course start date. +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_DateInput_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInputDocumentation.razor index aa14ab779..5308fd223 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInputDocumentation.razor @@ -13,56 +13,65 @@ - -
    By default, e + - are blocked. For all integral numeric types, dot . is blocked.
    - +
    +
    By default, e + - are blocked. For all integral numeric types, dot . is blocked.
    + +
    - -
    NumberInput is a generic component. Always specify the exact type. In the below example TValue is set to int, int?, float, float?, double, double?, decimal, and decimal?.
    - +
    +
    NumberInput is a generic component. Always specify the exact type. In the below example TValue is set to int, int?, float, float?, double, double?, decimal, and decimal?.
    + +
    - -
    - Set EnableMinMax="true" and set the Min and Max parameters to restrict the user input between the Min and Max range. -
    - - If the user tries to enter a number in the NumberInput field which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the Min value, then it will override with the Min value. - If the user input exceeds the Max value, it will override with the Max value. - - +
    +
    + Set EnableMinMax="true" and set the Min and Max parameters to restrict the user input between the Min and Max range. +
    + + If the user tries to enter a number in the NumberInput field which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the Min value, then it will override with the Min value. + If the user input exceeds the Max value, it will override with the Max value. + + +
    - -
    The Step sets the stepping interval when clicking the up and down spinner buttons. If not explicitly included, Step defaults to 1.
    - +
    +
    The Step sets the stepping interval when clicking the up and down spinner buttons. If not explicitly included, Step defaults to 1.
    + +
    - -
    You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.
    - +
    +
    You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.
    + +
    - -
    By default, negative numbers are not allowed. Set the AllowNegativeNumbers parameter to true to allow the negative numbers.
    - +
    +
    By default, negative numbers are not allowed. Set the AllowNegativeNumbers parameter to true to allow the negative numbers.
    + +
    - -
    Use the Disabled parameter to disable the NumberInput.
    - -
    Also, use Enable() and Disable() methods to enable and disable the NumberInput.
    - - Do not use both the Disabled parameter and Enable() & Disable() methods. - - +
    +
    Use the Disabled parameter to disable the NumberInput.
    + +
    Also, use Enable() and Disable() methods to enable and disable the NumberInput.
    + + Do not use both the Disabled parameter and Enable() & Disable() methods. + + +
    - -
    - Like any other blazor input component, NumberInput supports validations. - Add the DataAnnotations on the NumberInput component to validate the user input before submitting the form. - In the below example, we used Required and Range attributes. -
    - +
    +
    + Like any other blazor input component, NumberInput supports validations. + Add the DataAnnotations on the NumberInput component to validate the user input before submitting the form. + In the below example, we used Required and Range attributes. +
    + +
    - -
    This event fires on every user keystroke that changes the NumberInput value.
    - +
    +
    This event fires on every user keystroke that changes the NumberInput value.
    + +
    @code { private const string pageUrl = RouteConstants.Demos_NumberInput_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor index 675ee5699..81786bc1d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor @@ -13,49 +13,56 @@ - -
    - - +
    +
    + + +
    - -
    Use the Disabled parameter to disable the RangeInput.
    - -
    Also, use Enable() and Disable() methods to enable and disable the RangeInput.
    - - Do not use both the Disabled parameter and Enable() & Disable() methods. - - +
    +
    Use the Disabled parameter to disable the RangeInput.
    + +
    Also, use Enable() and Disable() methods to enable and disable the RangeInput.
    + + Do not use both the Disabled parameter and Enable() & Disable() methods. + + +
    - -
    - Set the Min and Max parameters to restrict the user input between the Min and Max range. - By default, the minimum is 0. -
    - -

    - By default the maximum is 100 for sbyte?, short?, int?, long?, float?, double? and decimal? data types. For other data types it is 0. -

    -

    - If the user tries to specify a numeric value which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the minimum value, then it will override with the Min value. - If the user input exceeds the maximum value, it will override with the Max value. -

    -     - +
    +
    + Set the Min and Max parameters to restrict the user input between the Min and Max range. + By default, the minimum is 0. +
    + +

    + By default the maximum is 100 for sbyte?, short?, int?, long?, float?, double? and decimal? data types. For other data types it is 0. +

    +

    + If the user tries to specify a numeric value which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the minimum value, then it will override with the Min value. + If the user input exceeds the maximum value, it will override with the Max value. +

    +     + +
    - -
    The Step parameter is a number that specifies the granularity that the value must adhere to. Only values that match the specified stepping interval are valid.
    - +
    +
    The Step parameter is a number that specifies the granularity that the value must adhere to. Only values that match the specified stepping interval are valid.
    + +
    - -
    - +
    +
    + +
    + +
    +
    + To add tick marks to a RangeInput, set the TickMarks parameter. +
    + +
    - -
    - To add tick marks to a RangeInput, set the TickMarks parameter. -
    - @code { private const string pageUrl = RouteConstants.Demos_RangeInput_Documentation; private const string pageTitle = "Blazor RangeInput"; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor index 4b516c8a2..83041f0fb 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor @@ -13,32 +13,37 @@ - +
    - - -
    Use the Disabled parameter to disable the Switch.
    - -
    Also, use Enable() and Disable() methods to enable and disable the Switch.
    - - Do not use both the Disabled parameter and Enable() & Disable() methods. - - - - -
    - Put your switches on the opposite side by using the Reverse parameter. -
    - - - -
    - This event fired when the Switch selection changed. -
    - - - - +
    + +
    +
    Use the Disabled parameter to disable the Switch.
    + +
    Also, use Enable() and Disable() methods to enable and disable the Switch.
    + + Do not use both the Disabled parameter and Enable() & Disable() methods. + + +
    + +
    +
    + Put your switches on the opposite side by using the Reverse parameter. +
    + +
    + +
    +
    + This event fired when the Switch selection changed. +
    + +
    + +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Switch_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor index 913e2483e..8a9d8bfaf 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor @@ -13,60 +13,67 @@ - - - The input UI generally varies from browser to browser. - In unsupported browsers, the control degrades gracefully to type="text". - +
    + + The input UI generally varies from browser to browser. + In unsupported browsers, the control degrades gracefully to type="text". + - + +
    - -
    -

    - The Blazor Bootstrap TimeInput component supports TimeOnly and TimeOnly?. - In the below example, TValue is set to TimeOnly and TimeOnly?. -

    -
    - +
    +
    +

    + The Blazor Bootstrap TimeInput component supports TimeOnly and TimeOnly?. + In the below example, TValue is set to TimeOnly and TimeOnly?. +

    +
    + +
    - -
    - Set EnableMinMax="true" and set the Max and Min parameters to restrict the user input between the Min and Max range. -
    - - If the user tries to enter a number in the TimeInput field which is out of range, then it will override with Max or Min value based on the context. - If the user input exceeds the Max value, it will override with the Max value. If the user input is less than the Min value, then it will override with the Min value. - - +
    +
    + Set EnableMinMax="true" and set the Max and Min parameters to restrict the user input between the Min and Max range. +
    + + If the user tries to enter a number in the TimeInput field which is out of range, then it will override with Max or Min value based on the context. + If the user input exceeds the Max value, it will override with the Max value. If the user input is less than the Min value, then it will override with the Min value. + + +
    - -
    Use the Disabled parameter to disable the TimeInput.
    - -
    Also, use Enable() and Disable() methods to enable and disable the TimeInput.
    - - Do not use both the Disabled parameter and Enable() & Disable() methods. - - +
    +
    Use the Disabled parameter to disable the TimeInput.
    + +
    Also, use Enable() and Disable() methods to enable and disable the TimeInput.
    + + Do not use both the Disabled parameter and Enable() & Disable() methods. + + +
    - -
    - Like any other blazor input component, TimeInput component supports validations. Use the DataAnnotations to validate the user input before submitting the form. In the below example, we used the Required attributes. -
    - +
    +
    + Like any other blazor input component, TimeInput component supports validations. Use the DataAnnotations to validate the user input before submitting the form. In the below example, we used the Required attributes. +
    + +
    - -
    - This event fires on every user keystroke/selection that changes the TimeInput value. -
    - +
    +
    + This event fires on every user keystroke/selection that changes the TimeInput value. +
    + +
    - -
    - One common scenario is that the time fields are restricted based on the entry in another time field. - In the example below, we restrict the arrival time based on the selection of departure. -
    - +
    +
    + One common scenario is that the time fields are restricted based on the entry in another time field. + In the example below, we restrict the arrival time based on the selection of departure. +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_TimeInput_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/GettingStarted/GettingStartedDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/GettingStarted/GettingStartedDocumentation.razor index e288258d5..6657dfd44 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/GettingStarted/GettingStartedDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/GettingStarted/GettingStartedDocumentation.razor @@ -15,20 +15,20 @@ - -
    - Please find the getting started documentation links, corresponding to each .NET version and project type, listed below: -
    +
    +
    + Please find the getting started documentation links, corresponding to each .NET version and project type, listed below: +
    - - +
    + - - + + @@ -49,19 +49,19 @@ - -
    # .NET Version Documentation Link
    1 .NET 8.NET 8 MAUI Blazor Hybrid App (.NET 8)
    + + - - +
    + - - + + @@ -77,20 +77,19 @@ - -
    # .NET Version Documentation Link
    1 .NET 7.NET 7 MAUI Blazor Hybrid App (.NET 7)
    + + - - - +
    + - - + + @@ -101,9 +100,9 @@ - -
    # .NET Version Documentation Link
    1 .NET 6.NET 6 Blazor Server (.NET 6)
    - + + +
    @code { private const string pageUrl = RouteConstants.Demos_GettingStarted_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Overview_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Overview_Documentation.razor index 315beac4b..f2d3a5ffc 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Overview_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Overview_Documentation.razor @@ -13,11 +13,13 @@ - - +
    + +
    - - +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Grid_Overview_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_DataBinding_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_DataBinding_Documentation.razor index afa7e9969..ae2e87650 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_DataBinding_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_DataBinding_Documentation.razor @@ -11,22 +11,24 @@ - -
    Assign a collection to the Data parameter to render the grid dynamically. The example below will render different department employees in the individual grid.
    - +
    +
    Assign a collection to the Data parameter to render the grid dynamically. The example below will render different department employees in the individual grid.
    + +
    - -
    You can update the collection assigned to the Data parameter. In the below example, the grid will render the updated collection.
    - -

    - The Add Employee button click adds a new employee to the existing employees collection—so explicit grid refresh is required. -

    -

    - The Add Employee 2 button click creates a shallow copy of the employees collection and adds a new employee. - This new collection is assigned to the employees variable. Now, the employees variable has a new reference. So the grid will refresh automatically. An explicit grid refresh call is not required. -

    -     - +
    +
    You can update the collection assigned to the Data parameter. In the below example, the grid will render the updated collection.
    + +

    + The Add Employee button click adds a new employee to the existing employees collection—so explicit grid refresh is required. +

    +

    + The Add Employee 2 button click creates a shallow copy of the employees collection and adds a new employee. + This new collection is assigned to the employees variable. Now, the employees variable has a new reference. So the grid will refresh automatically. An explicit grid refresh call is not required. +

    +     + +
    @code { private const string pageUrl = RouteConstants.Demos_Grid_DataBinding_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor index 7a64d9a47..eacceca93 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor @@ -11,52 +11,59 @@ - -
    For filtering, AllowFiltering and PropertyName parameters are required.
    -
    Add AllowFiltering="true" parameter to Grid and PropertyName parameter to all the GridColumns.
    - +
    +
    For filtering, AllowFiltering and PropertyName parameters are required.
    +
    Add AllowFiltering="true" parameter to Grid and PropertyName parameter to all the GridColumns.
    + +
    - -
    In the below example, StringComparision.Ordinal is used on the Employee Name column to make the filter case-sensitive.
    - -
    By default, StringComparison.OrdinalIgnoreCase is used to compare culture-agnostic and case-insensitive string matching.
    -     - +
    +
    In the below example, StringComparision.Ordinal is used on the Employee Name column to make the filter case-sensitive.
    + +
    By default, StringComparison.OrdinalIgnoreCase is used to compare culture-agnostic and case-insensitive string matching.
    +     + +
    - -
    - FilterOperator and FilterValue parameters are required to set the default filter. -
    -You can set the default filter on more than one GridColumn. -
    The default sorting is enabled on the Id column in the below example.
    - +
    +
    + FilterOperator and FilterValue parameters are required to set the default filter. +
    + You can set the default filter on more than one GridColumn. +
    The default sorting is enabled on the Id column in the below example.
    + +
    - -
    - Filterable parameter is required to disable the filter on a specific column. Add Filterable="false" parameter to GridColumn. The column filter is disabled on the Id column in the below example. -
    - +
    +
    + Filterable parameter is required to disable the filter on a specific column. Add Filterable="false" parameter to GridColumn. The column filter is disabled on the Id column in the below example. +
    + +
    - -
    Add FilterTextboxWidth parameter to the GridColumn to increase or decrease the filter textbox width, FilterTextboxWidth parameter is optional.
    -Filter textbox width measured in pixels. - +
    +
    Add FilterTextboxWidth parameter to the GridColumn to increase or decrease the filter textbox width, FilterTextboxWidth parameter is optional.
    + Filter textbox width measured in pixels. + - -

    - The Add Employee button click adds a new employee to the existing employees collection—so explicit grid refresh is required. -

    -

    - The Add Employee 2 button click creates a shallow copy of the employees collection and adds a new employee. - This new collection is assigned to the employees variable. Now, the employees variable has a new reference. So the grid will refresh automatically. An explicit grid refresh call is not required. -

    -     + +

    + The Add Employee button click adds a new employee to the existing employees collection—so explicit grid refresh is required. +

    +

    + The Add Employee 2 button click creates a shallow copy of the employees collection and adds a new employee. + This new collection is assigned to the employees variable. Now, the employees variable has a new reference. So the grid will refresh automatically. An explicit grid refresh call is not required. +

    +     +
    - - +
    + +
    - - +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Grid_Filters_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor index 70a90bc7b..aab3b56cf 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor @@ -11,22 +11,26 @@ - -
    For paging, AllowPaging and PageSize parameters are required.
    -
    Add AllowPaging="true" and PageSize="20" parameters to the Grid. PageSize parameter is optional.
    -The default page size is 10. - - - -
    - - - -
    - - - - +
    +
    For paging, AllowPaging and PageSize parameters are required.
    +
    Add AllowPaging="true" and PageSize="20" parameters to the Grid. PageSize parameter is optional.
    + The default page size is 10. + +
    + +
    +
    + +
    + +
    +
    + +
    + +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Grid_Paging_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor index 91571c2ef..6ec99e9d6 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor @@ -11,21 +11,24 @@ - -
    For sorting, AllowSorting and SortKeySelector parameters are required.
    -
    Add AllowSorting="true" parameter to Grid and SortKeySelector to all the GridColumns.
    - +
    +
    For sorting, AllowSorting and SortKeySelector parameters are required.
    +
    Add AllowSorting="true" parameter to Grid and SortKeySelector to all the GridColumns.
    + +
    - -
    IsDefaultSortColumn parameter is required to set the default sorting. Add IsDefaultSortColumn="true" parameter to the GridColumn.
    -
    The default sort direction will be ascending. To change the default sorting of a column, add SortDirection="SortDirection.Descending" to the GridColumn.
    -If more than one GridColumn has the IsDefaultSortColumn paramter, it will pick the first column as the default sorting column. -
    The default sorting is enabled on the Employee Name column in the below example, and the sort direction is descending.
    - +
    +
    IsDefaultSortColumn parameter is required to set the default sorting. Add IsDefaultSortColumn="true" parameter to the GridColumn.
    +
    The default sort direction will be ascending. To change the default sorting of a column, add SortDirection="SortDirection.Descending" to the GridColumn.
    + If more than one GridColumn has the IsDefaultSortColumn paramter, it will pick the first column as the default sorting column. +
    The default sorting is enabled on the Employee Name column in the below example, and the sort direction is descending.
    + +
    - -
    Add Sortable="false"parameter the GridColumn to disable the sorting. If sorting is disabled, then the SortKeySelector parameter is not required. The sorting is disabled on the Designation column in the below example.
    - +
    +
    Add Sortable="false"parameter the GridColumn to disable the sorting. If sorting is disabled, then the SortKeySelector parameter is not required. The sorting is disabled on the Designation column in the below example.
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Grid_Sorting_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor index d26e61651..94f4be137 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor @@ -11,37 +11,41 @@ - -
    - Set AllowSelection="true" to enable the selection on the Grid. - By default, SelectionMode is Single. -
    - - - -
    - To select multiple rows, set SelectionMode="GridSelectionMode.Multiple". -
    - - -

    Selected items are removed from the selection if they are not rendered after paging, sorting, filtering, etc.

    -     - - -
    - We can disable the header checkbox or row level checkbox based on a condition. - For this, we have DisableAllRowsSelection and DisableRowSelection delegate parameters. In the below example, we disabled the header checkbox if any of the employee Id is less than 105. - Also, disable check the row level checkbox if the employee Id is less than 105. -
    - - - - -
    - These CSS variables are used to set the default colors and background color of a row when it's selected. - You can override the --bb-table-selected-row-color, --bb-table-selected-row-background-color, --bb-table-selected-row-hover-color, and --bb-table-selected-row-hover-background-color variables in the application's specific CSS file to change the selected row's appearance. Please see the following example where the row text color is set to #fff (white) and the background color is set to #4c0bce (purple) when the row is selected. -
    - +
    +
    + Set AllowSelection="true" to enable the selection on the Grid. + By default, SelectionMode is Single. +
    + +
    + +
    +
    + To select multiple rows, set SelectionMode="GridSelectionMode.Multiple". +
    + + +

    Selected items are removed from the selection if they are not rendered after paging, sorting, filtering, etc.

    +     +
    + +
    +
    + We can disable the header checkbox or row level checkbox based on a condition. + For this, we have DisableAllRowsSelection and DisableRowSelection delegate parameters. In the below example, we disabled the header checkbox if any of the employee Id is less than 105. + Also, disable check the row level checkbox if the employee Id is less than 105. +
    + +
    + +
    + +
    + These CSS variables are used to set the default colors and background color of a row when it's selected. + You can override the --bb-table-selected-row-color, --bb-table-selected-row-background-color, --bb-table-selected-row-hover-color, and --bb-table-selected-row-hover-background-color variables in the application's specific CSS file to change the selected row's appearance. Please see the following example where the row text color is set to #fff (white) and the background color is set to #4c0bce (purple) when the row is selected. +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Grid_Selection_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor index feede1a31..31f9bf294 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor @@ -11,13 +11,15 @@ - -
    Use the HeaderTextAlignment parameter to change the header column alignment. By default, HeaderTextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End.
    - +
    +
    Use the HeaderTextAlignment parameter to change the header column alignment. By default, HeaderTextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End.
    + +
    - -
    Use the TextAlignment parameter to change the cell data alignment. By default, TextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End.
    - +
    +
    Use the TextAlignment parameter to change the cell data alignment. By default, TextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End.
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Grid_Alignment_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor index a247f3dd1..0a1051c2c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor @@ -11,11 +11,12 @@ - -
    This example shows how to save/load the Grid state. The state includes the page number, page size, and filters.
    -In version 0.5.1 and above, the Grid sorting state is not included as part of GridSettings. We will add it in the subsequent releases. -Browser local storage is used to persist the Grid state. Common locations exist for persisting state are Server-side storage, URL, Browser storage, and In-memory state container service. - +
    +
    This example shows how to save/load the Grid state. The state includes the page number, page size, and filters.
    + In version 0.5.1 and above, the Grid sorting state is not included as part of GridSettings. We will add it in the subsequent releases. + Browser local storage is used to persist the Grid state. Common locations exist for persisting state are Server-side storage, URL, Browser storage, and In-memory state container service. + +
    @code { private const string pageUrl = RouteConstants.Demos_Grid_Settings_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor index 971cdad24..7a91ee84d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor @@ -11,25 +11,30 @@ - -
    In the below example, we applied table-danger CSS class to the row where the employee is inactive and the table-success CSS class to the row where the employee designation is Architect.
    - - - -
    In the below example, we applied table-danger CSS class to the Active column where the employee is inactive and the table-success CSS class to the Active column where the employee is active.
    - - - -
    In the following example, the Class parameter is used to apply the CSS class to an entire grid column, including the header.
    - - - -
    - - - -
    - +
    +
    In the below example, we applied table-danger CSS class to the row where the employee is inactive and the table-success CSS class to the row where the employee designation is Architect.
    + +
    + +
    +
    In the below example, we applied table-danger CSS class to the Active column where the employee is inactive and the table-success CSS class to the Active column where the employee is active.
    + +
    + +
    +
    In the following example, the Class parameter is used to apply the CSS class to an entire grid column, including the header.
    + +
    + +
    +
    + +
    + +
    +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Grid_CustomCSSClass_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor index 05d60a9e8..2901b3000 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor @@ -11,13 +11,15 @@ - -
    - +
    +
    + +
    - -
    - +
    +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Grid_Events_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor index 2073dc60f..c63ca34dd 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor @@ -11,9 +11,10 @@ - -
    In the example below, you will see translations related to pagination and filters in Dutch.
    - +
    +
    In the example below, you will see translations related to pagination and filters in Dutch.
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Grid_Translations_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor index fcbc64cdb..954b39b5f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor @@ -11,15 +11,17 @@ - -
    - To set the fixed header, set the FixedHeader parameter to true. The minimum height of the grid is 320 pixels. - You can change the units to em, pt, px, or etc. by setting the Unit parameter. -
    - +
    +
    + To set the fixed header, set the FixedHeader parameter to true. The minimum height of the grid is 320 pixels. + You can change the units to em, pt, px, or etc. by setting the Unit parameter. +
    + +
    - - +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Grid_FixedHeader_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor index 8b2b59f50..fc43af58e 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor @@ -11,15 +11,18 @@ - -
    - +
    +
    + +
    - - +
    + +
    - - +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Grid_FreezeColumns_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor index b60c18a31..9b01e9f23 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor @@ -11,13 +11,15 @@ - -
    To enable detail view, set the AllowDetailView parameter to true. In the following example, existing <GridColumn> tags are nested under <GridColumns> tag to distinguish them from <GridDetailView>.
    - +
    +
    To enable detail view, set the AllowDetailView parameter to true. In the following example, existing <GridColumn> tags are nested under <GridColumns> tag to distinguish them from <GridDetailView>.
    + +
    - -
    - +
    +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Grid_DetailView_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor index 599d09e9c..dda8e7cff 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor @@ -11,9 +11,10 @@ - -
    To create a nested grid, we first need to enable the detail view. To enable the detail view, set the AllowDetailView parameter to true. In the following example, existing <GridColumn> tags are nested under <GridColumns> tag to distinguish them from <GridDetailView>.
    - +
    +
    To create a nested grid, we first need to enable the detail view. To enable the detail view, set the AllowDetailView parameter to true. In the following example, existing <GridColumn> tags are nested under <GridColumns> tag to distinguish them from <GridDetailView>.
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Grid_NestedGrid_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor index 0f2cdd592..9c43425fe 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor @@ -11,26 +11,31 @@ - -
    To format the cell data, use ToString method and format strings. Refer: How to format numbers, dates, enums, and other types in .NET
    -Example: @@context.Salary.ToString("N2"). - - - -
    To prevent text from wrapping, add TextNoWrap="true" to the GridColumn.
    - - - -
    If there are no records to display in the Grid, by default, it will display the No records to display message. You can change this message by adding the EmptyText parameter to the Grid.
    - - - -
    Set the GridEmptyDataTemplate to customize the message displayed when the grid has no records.
    - - - -
    In the below example, we use <HeaderContent> and <ChildContent> tags to define custom column header and cell content. When defining header content, filters and sorting are removed from column.
    - +
    +
    To format the cell data, use ToString method and format strings. Refer: How to format numbers, dates, enums, and other types in .NET
    + Example: @@context.Salary.ToString("N2"). + +
    + +
    +
    To prevent text from wrapping, add TextNoWrap="true" to the GridColumn.
    + +
    + +
    +
    If there are no records to display in the Grid, by default, it will display the No records to display message. You can change this message by adding the EmptyText parameter to the Grid.
    + +
    + +
    +
    Set the GridEmptyDataTemplate to customize the message displayed when the grid has no records.
    + +
    + +
    +
    In the below example, we use <HeaderContent> and <ChildContent> tags to define custom column header and cell content. When defining header content, filters and sorting are removed from column.
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Grid_OtherExamples_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor index a06a9e265..b22db5e48 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor @@ -11,47 +11,59 @@ - - - - - - - -
    - In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website. -
    - - - - - - - - - - - - - - - - - - - - - -
    - In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website. -
    - - - - - - - +
    + +
    + +
    + +
    + +
    +
    + In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website. +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    +
    + In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website. +
    + +
    + +
    + +
    + +
    + +
    @code{ private const string pageUrl = RouteConstants.Demos_Icons_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor index 6b36ddda4..53d2de8ee 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor @@ -11,22 +11,25 @@ - -
    - By default images are responsive. The default value of the IsResponsive parameter is true. -
    - +
    +
    + By default images are responsive. The default value of the IsResponsive parameter is true. +
    + +
    - -
    - To set the image to have a rounded 1px border appearance, set the IsThumbnail parameter to true. -
    - +
    +
    + To set the image to have a rounded 1px border appearance, set the IsThumbnail parameter to true. +
    + +
    - - - - +
    + + + +
    @code { private const string pageUrl = RouteConstants.Demos_Images_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor index 894033d53..31fa61f85 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor @@ -11,24 +11,26 @@ - -
    - Assuming you followed the getting started docs for the initial setup. -
      -
    1. Blazor WebAssembly Project: Follow the getting started steps for the initial setup.
      2. -
    2. Blazor Server Project: Follow the getting started steps for the initial setup.
      3. -
    -
    - - -
    - 1. Replace MainLayout.razor page code with the below code. -
    - - Remove all the CSS content from the Shared/MainLayout.razor.css file. - - - +
    +
    + Assuming you followed the getting started docs for the initial setup. +
      +
    1. Blazor WebAssembly Project: Follow the getting started steps for the initial setup.
      2. +
    2. Blazor Server Project: Follow the getting started steps for the initial setup.
      3. +
    +
    +
    + +
    +
    + 1. Replace MainLayout.razor page code with the below code. +
    + + Remove all the CSS content from the Shared/MainLayout.razor.css file. + + + +
    @code { private const string pageUrl = "/layout-setup/blazor-server"; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor index 8c1987108..88ea87c90 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor @@ -11,24 +11,26 @@ - -
    - Assuming you followed the getting started docs for the initial setup. -
      -
    1. Blazor WebAssembly Project: Follow the getting started steps for the initial setup.
      2. -
    2. Blazor Server Project: Follow the getting started steps for the initial setup.
      3. -
    -
    - - -
    - 1. Replace MainLayout.razor page code with the below code. -
    - - Remove all the CSS content from the Shared/MainLayout.razor.css file. - - - +
    +
    + Assuming you followed the getting started docs for the initial setup. +
      +
    1. Blazor WebAssembly Project: Follow the getting started steps for the initial setup.
      2. +
    2. Blazor Server Project: Follow the getting started steps for the initial setup.
      3. +
    +
    +
    + +
    +
    + 1. Replace MainLayout.razor page code with the below code. +
    + + Remove all the CSS content from the Shared/MainLayout.razor.css file. + + + +
    @code { private const string pageUrl = "/layout-setup/blazor-webassembly"; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor index fbb6982bf..7368c939c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor @@ -11,53 +11,65 @@ - -
    - Before you start using the GoogleMap component in your project, you need an API key. - Please follow the link below for detailed steps. - Link: https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key. -
    +
    +
    + Before you start using the GoogleMap component in your project, you need an API key. + Please follow the link below for detailed steps. + Link: https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key. +
    +
    - -
    This example demonstrates how to use a simple Google Map component.
    - +
    +
    This example demonstrates how to use a simple Google Map component.
    + +
    - -
    This example demonstrates how to use a simple Google Map component with marker.
    - +
    +
    This example demonstrates how to use a simple Google Map component with marker.
    + +
    - - -
    To scale a marker, use the PinElement.Scale option.
    - - -
    Use the PinElement.Background option to change the background color of a marker.
    - - -
    Use the PinElement.BorderColor option to change the border color of a marker.
    - - -
    Use the PinElement.GlyphColor option to change the glyph color of a marker.
    - - -
    Set the PinElement.Glyph option to an empty string to hide a marker's glyph.
    - - -
    Use the PinElement.UseIconFonts and PinElement.Glyph options to use the icon fonts.
    - +
    +
    +
    To scale a marker, use the PinElement.Scale option.
    + +
    +
    +
    Use the PinElement.Background option to change the background color of a marker.
    + +
    +
    +
    Use the PinElement.BorderColor option to change the border color of a marker.
    + +
    +
    +
    Use the PinElement.GlyphColor option to change the glyph color of a marker.
    + +
    +
    +
    Set the PinElement.Glyph option to an empty string to hide a marker's glyph.
    + +
    +
    +
    Use the PinElement.UseIconFonts and PinElement.Glyph options to use the icon fonts.
    + +
    - - +
    + +
    - -
    - This example shows you how to make markers respond to click events. To make a marker clickable: - Set the Clickable parameter to true. -
    - +
    +
    + This example shows you how to make markers respond to click events. To make a marker clickable: + Set the Clickable parameter to true. +
    + +
    - - +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_GoogleMap_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor index 40efc4af5..1b05c4f1d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor @@ -11,100 +11,116 @@ - -
    - - - -
    - Use headers to structure your content. Start a line with # for a heading. Add more # characters for subheadings, up to six levels. -
    - - - -
    - Break your text into paragraphs or line breaks for easier reading. -
    - - - -
    - Quote text with > before it. Use more > characters to nest quotes. For blocks of text, use > at the start of each line. -
    - - - -
    - Add a horizontal rule with a line of ---. -
    - - - -
    - Emphasize text with bold, italics, or strikethrough: -
      -
    • Italics: *text* or _text_
      • -
    • Bold: **text**
      • -
    • Strikethrough: ~~text~~
      • -
    • Combine for more emphasis.
      • -
    -
    - - - -
    - - - -
    - Tables help organize structured data. -
      -
    • Use | to separate cells.
      • -
    • Escape | with \| if used within a cell.
      • -
    • Use <br /> for new lines within a cell.
      • -
    • End each row with a carriage return (CR) or line feed (LF).
      • -
    -
    - -
    - - - -
    - Use lists to organize related items: -
      -
    • Ordered lists: start with a number followed by a period.
      • -
    • Unordered lists: start with a -.
      • -
    • Begin each list item on a new line.
      • -
    -
    - -
    - - - -
    - - - -
    - -
    - -
    - - - -
    - - - -
    - - - -
    - +
    +
    + +
    + +
    +
    + Use headers to structure your content. Start a line with # for a heading. Add more # characters for subheadings, up to six levels. +
    + +
    + +
    +
    + Break your text into paragraphs or line breaks for easier reading. +
    + +
    + +
    +
    + Quote text with > before it. Use more > characters to nest quotes. For blocks of text, use > at the start of each line. +
    + +
    + +
    +
    + Add a horizontal rule with a line of ---. +
    + +
    + +
    +
    + Emphasize text with bold, italics, or strikethrough: +
      +
    • Italics: *text* or _text_
      • +
    • Bold: **text**
      • +
    • Strikethrough: ~~text~~
      • +
    • Combine for more emphasis.
      • +
    +
    + +
    + +
    +
    + +
    + +
    +
    + Tables help organize structured data. +
      +
    • Use | to separate cells.
      • +
    • Escape | with \| if used within a cell.
      • +
    • Use <br /> for new lines within a cell.
      • +
    • End each row with a carriage return (CR) or line feed (LF).
      • +
    +
    + +
    + +
    + +
    +
    + Use lists to organize related items: +
      +
    • Ordered lists: start with a number followed by a period.
      • +
    • Unordered lists: start with a -.
      • +
    • Begin each list item on a new line.
      • +
    +
    +
    + +
    +
    + +
    + +
    +
    + +
    + +
    +
    + +
    + +
    + +
    + +
    +
    + +
    + +
    +
    + +
    + +
    +
    + +
    @code{ private const string pageUrl = RouteConstants.Demos_Markdown_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor index a3590fbbc..9e7f49694 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor @@ -11,58 +11,67 @@ - - +
    + +
    - -
    Render different components dynamically within the modal without iterating through possible types or using conditional logic.
    -
    - If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. -
    - -EmployeeDemoComponent1.razor - +
    +
    Render different components dynamically within the modal without iterating through possible types or using conditional logic.
    +
    + If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. +
    + + EmployeeDemoComponent1.razor + +
    - -
    Event callbacks (EventCallback) can be passed in its parameter dictionary.
    -
    - In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. - The parent component passes the callback method, ShowDTMessage in the parameter dictionary: -
      -
    • The string key is the callback method's name, OnClickCallback.
      • -
    • The object value is created by EventCallbackFactory.Create for the parent callback method, ShowDTMessage.
      • -
    -
    - -EmployeeDemoComponent2.razor - +
    +
    Event callbacks (EventCallback) can be passed in its parameter dictionary.
    +
    + In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. + The parent component passes the callback method, ShowDTMessage in the parameter dictionary: +
      +
    • The string key is the callback method's name, OnClickCallback.
      • +
    • The object value is created by EventCallbackFactory.Create for the parent callback method, ShowDTMessage.
      • +
    +
    + + EmployeeDemoComponent2.razor + +
    - -
    When UseStaticBackdrop is set to true, the modal will not close when clicking outside it. Click the button below to try it.
    - +
    +
    When UseStaticBackdrop is set to true, the modal will not close when clicking outside it. Click the button below to try it.
    + +
    - -
    When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
    - +
    +
    When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
    + -
    You can also create a scrollable modal that allows scroll the modal body by adding IsScrollable="true".
    - +
    You can also create a scrollable modal that allows scroll the modal body by adding IsScrollable="true".
    + +
    - -
    Add IsVerticallyCentered="true" to vertically center the modal.
    - - +
    +
    Add IsVerticallyCentered="true" to vertically center the modal.
    + + +
    - -
    Modals have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
    - +
    +
    Modals have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
    + +
    - - +
    + +
    - -
    Blazor Bootstrap modal class exposes a few events for hooking into modal functionality.
    - +
    +
    Blazor Bootstrap modal class exposes a few events for hooking into modal functionality.
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Modal_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor index cafdb8153..d8e246381 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor @@ -13,50 +13,57 @@ Similar to modals, only one offcanvas can be shown at a time. - - +
    + +
    - -
    Render different components dynamically within the offcanvas without iterating through possible types or using conditional logic.
    -
    - If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. -
    - -EmployeeDemoComponent1.razor - +
    +
    Render different components dynamically within the offcanvas without iterating through possible types or using conditional logic.
    +
    + If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. +
    + + EmployeeDemoComponent1.razor + +
    - -
    Event callbacks (EventCallback) can be passed in its parameter dictionary.
    -
    - In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. - The parent component passes the callback method, ShowDTMessage in the parameter dictionary: -
      -
    • The string key is the callback method's name, OnClickCallback.
      • -
    • The object value is created by EventCallbackFactory.Create for the parent callback method, ShowDTMessage.
      • -
    -
    - -EmployeeDemoComponent2.razor - +
    +
    Event callbacks (EventCallback) can be passed in its parameter dictionary.
    +
    + In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. + The parent component passes the callback method, ShowDTMessage in the parameter dictionary: +
      +
    • The string key is the callback method's name, OnClickCallback.
      • +
    • The object value is created by EventCallbackFactory.Create for the parent callback method, ShowDTMessage.
      • +
    +
    + + EmployeeDemoComponent2.razor + +
    - -
    Try the top, bottom, and left examples out below.
    - +
    +
    Try the top, bottom, and left examples out below.
    + +
    Default placement for the offcanvas component is right. - -
    When UseStaticBackdrop is set to true, the offcanvas will not close when clicking outside of it.
    - +
    +
    When UseStaticBackdrop is set to true, the offcanvas will not close when clicking outside of it.
    + +
    - -
    Set the size of the Offcanvas with the Size parameter. The default value is OffcanvasSize.Regular.
    - - +
    +
    Set the size of the Offcanvas with the Size parameter. The default value is OffcanvasSize.Regular.
    + + +
    - -
    Blazor Bootstrap offcanvas component exposes a few events for hooking into offcanvas functionality.
    - +
    +
    Blazor Bootstrap offcanvas component exposes a few events for hooking into offcanvas functionality.
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Offcanvas_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor index 336602e9b..60f8627c5 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor @@ -11,25 +11,31 @@ - -
    We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links.
    - - - - - - - - - -
    Fancy larger or smaller pagination? Add Size="PaginationSize.Small" or Size="PaginationSize.Large" for additional sizes.
    - - - - - - - +
    +
    We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links.
    + +
    + +
    + +
    + +
    + +
    + +
    +
    Fancy larger or smaller pagination? Add Size="PaginationSize.Small" or Size="PaginationSize.Large" for additional sizes.
    + +
    + +
    + +
    + +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Pagination_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor index de59e1db3..3c73080aa 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor @@ -11,21 +11,24 @@ - - +
    + +
    - -
    - Set the Orientation parameter to Orientation.Landscape to change the default orientation from Portrait to Landscape. -
    - +
    +
    + Set the Orientation parameter to Orientation.Landscape to change the default orientation from Portrait to Landscape. +
    + +
    - -
    PDF Viewer component supports base64 string as a URL.
    - - Url="@@string.Format("data:application/pdf;base64,{0}", pdfBase64String)" - - +
    +
    PDF Viewer component supports base64 string as a URL.
    + + Url="@@string.Format("data:application/pdf;base64,{0}", pdfBase64String)" + + +
    @code { private const string pageUrl = RouteConstants.Demos_PDFViewer_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Placeholders/PlaceholderDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Placeholders/PlaceholderDocumentation.razor index 344571750..68c000645 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Placeholders/PlaceholderDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Placeholders/PlaceholderDocumentation.razor @@ -11,29 +11,35 @@ - -
    - Placeholders can be used to enhance the experience of your application. -
    - - - - - -
    You can change the width through PlaceholderWidth, width utilities, or inline styles.
    - - - -
    By default, the placeholder uses currentColor. This can be overridden with the Color property of type enum.
    - - - -
    The size of placeholders are based on the typographic style of the parent element. Customize them with Size property of type enum.
    - - - -
    Animate placeholders with PlaceholderAnimation.Glow or PlaceholderAnimation.Wave to better convey the perception of something being actively loaded.
    - +
    +
    + Placeholders can be used to enhance the experience of your application. +
    +
    + +
    + +
    + +
    +
    You can change the width through PlaceholderWidth, width utilities, or inline styles.
    + +
    + +
    +
    By default, the placeholder uses currentColor. This can be overridden with the Color property of type enum.
    + +
    + +
    +
    The size of placeholders are based on the typographic style of the parent element. Customize them with Size property of type enum.
    + +
    + +
    +
    Animate placeholders with PlaceholderAnimation.Glow or PlaceholderAnimation.Wave to better convey the perception of something being actively loaded.
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Placeholders_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Preload/PreloadDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Preload/PreloadDocumentation.razor index d4c170d75..0f4f24ee0 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Preload/PreloadDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Preload/PreloadDocumentation.razor @@ -11,32 +11,36 @@ - -
    -
      -
    • Add the Preload component to your current page or your layout page.
      • -
    • Inject PreloadService.
      • -
    • Call preloadService.Show() before you make any call to the API.
      • -
    • Call preloadService.Hide() after you get the response from the API.
      • -
    -
    - - -
    1. Add the Preload component in MainLayout.razor page as shown below.
    - -
    2. Inject PreloadService, then call the Show() and Hide() methods before and after the Service/API, respectively, as shown below.
    - - - -
    - - - -
    - Change the default spinner color by passing the SpinnerColor enum to the Show(...) method. - In the below example, we are using a global preload service, as shown in the above section. -
    - +
    +
    +
      +
    • Add the Preload component to your current page or your layout page.
      • +
    • Inject PreloadService.
      • +
    • Call preloadService.Show() before you make any call to the API.
      • +
    • Call preloadService.Hide() after you get the response from the API.
      • +
    +
    +
    + +
    +
    1. Add the Preload component in MainLayout.razor page as shown below.
    + +
    2. Inject PreloadService, then call the Show() and Hide() methods before and after the Service/API, respectively, as shown below.
    + +
    + +
    +
    + +
    + +
    +
    + Change the default spinner color by passing the SpinnerColor enum to the Show(...) method. + In the below example, we are using a global preload service, as shown in the above section. +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Preload_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Progress/ProgressDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Progress/ProgressDocumentation.razor index f61be1bb3..e65e0b5f7 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Progress/ProgressDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Progress/ProgressDocumentation.razor @@ -11,43 +11,53 @@ - - +
    + +
    - -
    Add labels to your Blazor ProgressBar component using the Label parameter or by calling the SetLabel(...) method.
    - +
    +
    Add labels to your Blazor ProgressBar component using the Label parameter or by calling the SetLabel(...) method.
    + +
    - -
    Use IncreaseWidth() or DecreaseWidth() methods to increase or decrease the Blazor ProgressBar width.
    - +
    +
    Use IncreaseWidth() or DecreaseWidth() methods to increase or decrease the Blazor ProgressBar width.
    + +
    - -
    Set the height of the Blazor Progress by using the Height parameter. Height is measured in pixels.
    - +
    +
    Set the height of the Blazor Progress by using the Height parameter. Height is measured in pixels.
    + +
    - -
    Use the Color parameter or the SetColor(ProgressColor color) method to change the appearance of individual Blazor ProgressBar components.
    - +
    +
    Use the Color parameter or the SetColor(ProgressColor color) method to change the appearance of individual Blazor ProgressBar components.
    + +
    - -
    You can dynamically set the Blazor ProgressBar color by calling the SetColor() method.
    - +
    +
    You can dynamically set the Blazor ProgressBar color by calling the SetColor() method.
    + +
    - -
    Include multiple Blazor ProgressBar components in a Blazor Progress component if needed.
    - +
    +
    Include multiple Blazor ProgressBar components in a Blazor Progress component if needed.
    + +
    - -
    Add Type="ProgressType.Striped" to any Blazor ProgressBar component to apply a stripe.
    - +
    +
    Add Type="ProgressType.Striped" to any Blazor ProgressBar component to apply a stripe.
    + +
    - -
    The stripes can also be animated. Add Type="ProgressType.StripedAndAnimated" to the Blazor ProgressBar component to animate the stripes right to the left.
    - +
    +
    The stripes can also be animated. Add Type="ProgressType.StripedAndAnimated" to the Blazor ProgressBar component to animate the stripes right to the left.
    + +
    - - +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Progress_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/RibbonDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/RibbonDocumentation.razor index 52132afaf..904943980 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/RibbonDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/RibbonDocumentation.razor @@ -11,17 +11,19 @@ - -
    In the following example, you will see a ribbon similar to the one found in Outlook.
    - +
    +
    In the following example, you will see a ribbon similar to the one found in Outlook.
    + +
    - -
    In the following example, instead of icons like Bootstrap, Font Awesome, etc., we used PNG icons.
    - +
    +
    In the following example, instead of icons like Bootstrap, Font Awesome, etc., we used PNG icons.
    + - - NOTE: All the PNG icons used on this page are from Flaticon with a premium license only. - + + NOTE: All the PNG icons used on this page are from Flaticon with a premium license only. + +
    @code { private const string pageUrl = RouteConstants.Demos_Ribbon_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ScriptLoader/ScriptLoaderDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/ScriptLoader/ScriptLoaderDocumentation.razor index 473bcfa1c..12859fb89 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/ScriptLoader/ScriptLoaderDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/ScriptLoader/ScriptLoaderDocumentation.razor @@ -11,11 +11,12 @@ - -
    - In the following example, the jQuery script is loaded using the Script Loader component. -
    - +
    +
    + In the following example, the jQuery script is loaded using the Script Loader component. +
    + +
    To test whether the jQuery script has been loaded successfully, run $('#script1')[0] in the browser console. @@ -23,17 +24,17 @@ Blazor Script Loader - Test whether the jQuery script has been loaded successfully - -
    - Blazor Bootstrap Script Loader component exposes two events. - - +
    +
    + Blazor Bootstrap Script Loader component exposes two events. +
    + - - + + @@ -42,14 +43,15 @@ - -
    Event Name Description
    OnError An event that is fired when a script loading error occurs.OnLoad An event that is fired when a script has been successfully loaded.
    -
    -
    - In the following example, an incorrect script source is specified. - This is why the OnError callback event is called, and the message is updated with the error message. -
    - + + + +
    + In the following example, an incorrect script source is specified. + This is why the OnError callback event is called, and the message is updated with the error message. +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_ScriptLoader_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor index 3b1b6ecb9..f7afe52ee 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor @@ -13,30 +13,37 @@ - - +
    + +
    - - +
    + +
    - - +
    + +
    - - +
    + +
    - - +
    + +
    - - +
    + +
    - -
    1. Add the Modal component in MainLayout.razor page as shown below.
    - +
    +
    1. Add the Modal component in MainLayout.razor page as shown below.
    + -
    2. Inject ModalService, then call the ShowAsync(...) method as shown below. ShowAsync method accepts ModalOption object as a parameter.
    - +
    2. Inject ModalService, then call the ShowAsync(...) method as shown below. ShowAsync method accepts ModalOption object as a parameter.
    + +
    @code { private const string pageUrl = RouteConstants.Demos_ModalService_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor index c7b1e687b..61f77ae14 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor @@ -11,49 +11,60 @@ - - +
    + +
    - -
    Use NavItem's Id and ParentId to set the parent-child relation.
    - -Currently, two levels of navigation are supported. For more than two levels, use the Sidebar2 component. +
    +
    Use NavItem's Id and ParentId to set the parent-child relation.
    + + Currently, two levels of navigation are supported. For more than two levels, use the Sidebar2 component. +
    - -
    Set IconColor property to change the color.
    - +
    +
    Set IconColor property to change the color.
    + +
    - -
    Replace your MainLayout.razor page code with the below example to have a complete layout with a sidebar.
    - +
    +
    Replace your MainLayout.razor page code with the below example to have a complete layout with a sidebar.
    + +
    - -
    Call ToggleSidebar() method to toggle the Sidebar to show the icons only.
    - +
    +
    Call ToggleSidebar() method to toggle the Sidebar to show the icons only.
    + +
    - -
    A badge is useful when displaying the application version, environment, or other information. Use the BadgeText parameter to show the badge.
    - +
    +
    A badge is useful when displaying the application version, environment, or other information. Use the BadgeText parameter to show the badge.
    + +
    - -
    Use the CustomIconName parameter to set the custom logo icon using font awesome or other icons.
    - +
    +
    Use the CustomIconName parameter to set the custom logo icon using font awesome or other icons.
    + +
    - -
    Use the ImageSrc parameter to set the brand logo.
    - +
    +
    Use the ImageSrc parameter to set the brand logo.
    + +
    - -
    Developers can customize the sidebar color by changing the CSS variables, as mentioned in the below example.
    - +
    +
    Developers can customize the sidebar color by changing the CSS variables, as mentioned in the below example.
    + +
    - -
    Set the Class property of a NavItem to apply a custom CSS class.
    - +
    +
    Set the Class property of a NavItem to apply a custom CSS class.
    + +
    - -
    Set the Width parameter to change the sidebar width. Default value is 270px.
    - +
    +
    Set the Width parameter to change the sidebar width. Default value is 270px.
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Sidebar_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor index 8b282c553..62b3b2240 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor @@ -11,33 +11,40 @@ - -
    - - - -
    - - -@* -
    Set IconColor property to change the color.
    - *@ - - -
    Replace your MainLayout.razor page code with the below example to have a complete layout with a sidebar.
    - - - -
    Use the CustomIconName parameter to set the custom logo icon using font awesome or other icons.
    - - - -
    Use the ImageSrc parameter to set the brand logo.
    - - - -
    Set the Width parameter to change the sidebar width. Default value is 270px.
    - +
    +
    + +
    + +
    +
    + +
    + +@*
    +
    Set IconColor property to change the color.
    + +
    *@ + +
    +
    Replace your MainLayout.razor page code with the below example to have a complete layout with a sidebar.
    + +
    + +
    +
    Use the CustomIconName parameter to set the custom logo icon using font awesome or other icons.
    + +
    + +
    +
    Use the ImageSrc parameter to set the brand logo.
    + +
    + +
    +
    Set the Width parameter to change the sidebar width. Default value is 270px.
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Sidebar2_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor index c38c3b00d..c3a2c8528 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor @@ -11,65 +11,74 @@ - -
    Before using the SortableList component, include the SortableJS script reference in your index.html/_Host.cshtml file.
    - - - -
    - - - -
    -

    To drag-and-drop an item from one list to the other and vice versa, set the Group parameter for all the lists. Providing the same Group name for the lists is what links them together.

    -

    In the below example, both lists use the same Group.

    -
    - - -
    - In the following example, all three lists use the same group. -
    - - - -
    - By setting Pull="SortableListPullMode.Clone", you can enable item cloning. Drag an item from one list to another to create a copy that stays in the original list. -
    - - - -
    - You can disable list sorting by setting AllowSorting="false". In the example below, the list cannot be sorted. -
    - - - -
    - The Handle parameter specifies the CSS class that denotes the drag handle. In the example below, items can only be sorted by dragging the handle itself. -
    - - - -
    - Try dragging the red-backgrounded item. You won't be able to, as it's disabled using the DisableItem parameter. -
    - - - - -@*
    - *@ - -
    Nested list sorting is not currently supported. We will add this feature in upcoming releases.
    -     - - -
    - - - -
    - +
    +
    Before using the SortableList component, include the SortableJS script reference in your index.html/_Host.cshtml file.
    + +
    + +
    +
    + +
    + +
    +
    +

    To drag-and-drop an item from one list to the other and vice versa, set the Group parameter for all the lists. Providing the same Group name for the lists is what links them together.

    +

    In the below example, both lists use the same Group.

    +
    + + +
    + In the following example, all three lists use the same group. +
    + +
    + +
    +
    + By setting Pull="SortableListPullMode.Clone", you can enable item cloning. Drag an item from one list to another to create a copy that stays in the original list. +
    + +
    + +
    +
    + You can disable list sorting by setting AllowSorting="false". In the example below, the list cannot be sorted. +
    + +
    + +
    +
    + The Handle parameter specifies the CSS class that denotes the drag handle. In the example below, items can only be sorted by dragging the handle itself. +
    + +
    + +
    +
    + Try dragging the red-backgrounded item. You won't be able to, as it's disabled using the DisableItem parameter. +
    + +
    + +
    + @*
    + *@ + +
    Nested list sorting is not currently supported. We will add this feature in upcoming releases.
    +     +
    + +
    +
    + +
    + +
    +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_SortableList_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Spinners/SpinnersDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Spinners/SpinnersDocumentation.razor index 30ce7e853..38168712a 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Spinners/SpinnersDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Spinners/SpinnersDocumentation.razor @@ -11,50 +11,60 @@ - -
    Use the border spinners for a lightweight loading indicator.
    - +
    +
    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. -
    - +
    +
    + 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! -
    - - +
    +
    + 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.
    - - +
    +
    The loading dots are a special indicator for a lightweight loading indicator.
    + + +
    - - - +
    +
    + +
    - - - - +
    +
    + + +
    - - +
    + +
    - - +
    + +
    - - - - +
    + + + +
    - - +
    + +
    @code{ private const string pageUrl = RouteConstants.Demos_Spinners_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor index 30857e135..ab64a5894 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor @@ -11,60 +11,70 @@ - - - - -
    To create a fade-in effect for tabs, add the EnableFadeEffect="true" parameter. Additionally, set the IsActive="true" parameter on the first tab pane to display its content initially.
    - - - -
    To customize the tab title, use the TitleTemplate parameter, as demonstrated in the following example.
    - - - -
    Disable specific tabs by adding Disabled="true" parameter.
    - - - -
    To transform the tabs into pills, use the parameter NavStyle="NavStyle.Pills".
    - - - -
    Use the NavStyle="NavStyle.Underline" parameter to change the tabs to an underlined style.
    - - - -
    Display your tabs vertically by setting the NavStyle parameter to NavStyle.Vertical.
    - - - - - - - - - -
    You can activate individual tabs in several ways. Use predefined methods such as ShowFirstTabAsync, ShowLastTabAsync, ShowTabByIndexAsync, and ShowTabByNameAsync, as shown below.
    - - - -
    - When displaying a new tab, the events fire in the following sequence: -

    - 1. OnHiding (on the currently active tab)
    - 2. OnShowing (on the tab that is about to be displayed)
    - 3. OnHidden (on the previously active tab, which is the same one that triggered the OnHiding event)
    - 4. OnShown (on the newly activated tab that has just been displayed, which is the same one that triggered the OnShowing event)
    -

    - - +
    + +
    + +
    +
    To create a fade-in effect for tabs, add the EnableFadeEffect="true" parameter. Additionally, set the IsActive="true" parameter on the first tab pane to display its content initially.
    + +
    + +
    +
    To customize the tab title, use the TitleTemplate parameter, as demonstrated in the following example.
    + +
    + +
    +
    Disable specific tabs by adding Disabled="true" parameter.
    + +
    + +
    +
    To transform the tabs into pills, use the parameter NavStyle="NavStyle.Pills".
    + +
    + +
    +
    Use the NavStyle="NavStyle.Underline" parameter to change the tabs to an underlined style.
    + +
    + +
    +
    Display your tabs vertically by setting the NavStyle parameter to NavStyle.Vertical.
    + +
    + +
    + +
    + +
    + +
    + +
    +
    You can activate individual tabs in several ways. Use predefined methods such as ShowFirstTabAsync, ShowLastTabAsync, ShowTabByIndexAsync, and ShowTabByNameAsync, as shown below.
    + +
    + +
    +
    + When displaying a new tab, the events fire in the following sequence: +

    + 1. OnHiding (on the currently active tab)
    + 2. OnShowing (on the tab that is about to be displayed)
    + 3. OnHidden (on the previously active tab, which is the same one that triggered the OnHiding event)
    + 4. OnShown (on the newly activated tab that has just been displayed, which is the same one that triggered the OnShowing event)
    +

    +
    + - - + + @@ -81,31 +91,37 @@ - -
    Event Name Description
    OnHiding This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden).OnShown This event fires on tab show after a tab has been shown.
    - - If no tab was already active, then the OnHiding and OnHidden events will not be fired. + + + + If no tab was already active, then the OnHiding and OnHidden events will not be fired. + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + +
    + + In the following example, we are deleting tabs dynamically. Ensure that the @@key parameter is added with unique value. - - - - - - - - - - - - - - - - - - In the following example, we are deleting tabs dynamically. Ensure that the @@key parameter is added with unique value. - - + +
    @code { private const string pageUrl = RouteConstants.Demos_Tabs_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/ToastsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/ToastsDocumentation.razor index 2c4461d8d..bc1fa6479 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/ToastsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/ToastsDocumentation.razor @@ -13,44 +13,52 @@
    Blazor Toasts are lightweight notifications designed to mimic the push notifications that mobile and desktop operating systems have popularized. They're built with a flexbox, making it easy to align and position.
    - -
      -
    • Blazor Toasts will not hide automatically if you do not specify AutoHide="true".
      • -
    • Use global toasts service for the application instead of page level toasts.
      • -
    - - - - - - - - -
    Add AutoHide="true" parameter to hide the Blazor Toasts after the delay. The default delay is 5000 milliseconds, be sure to update the delay timeout so that users have enough time to read the toast.
    - - - -
    Set AutoHide="true" property on ToastMessage to hide individual Blazor Toast message after the delay. The default delay is 5000 milliseconds, be sure to update the delay timeout so that users have enough time to read the toast.
    -
    In the below example, AutoHide="false" for Danger and Warning messages.
    - - - -
    Change the Blazor Toasts placement according to your need. The default placement will be top right corner. Use the ToastsPlacement parameter to update the Blazor Toasts placement.
    - - - -
    Blazor Toasts component shows a maximum of 5 toasts by default. If you add a new toast to the existing list, the first toast gets deleted like FIFO (First In First Out). Change the maximum capacity according to your need by using the StackLength parameter.
    -
    In the below example, StackLength is set to 3. It shows a maximum of 3 toast messages at any time.
    - - - -
    1. Add the Toasts component in MainLayout.razor page as shown below.
    - - - Set the Toasts component parameters as per your requirement. - -
    2. Inject ToastService, then call the Notify(...) method as shown below.
    - +
    +
      +
    • Blazor Toasts will not hide automatically if you do not specify AutoHide="true".
      • +
    • Use global toasts service for the application instead of page level toasts.
      • +
    +
    + +
    + +
    + +
    + +
    + +
    +
    Add AutoHide="true" parameter to hide the Blazor Toasts after the delay. The default delay is 5000 milliseconds, be sure to update the delay timeout so that users have enough time to read the toast.
    + +
    + +
    +
    Set AutoHide="true" property on ToastMessage to hide individual Blazor Toast message after the delay. The default delay is 5000 milliseconds, be sure to update the delay timeout so that users have enough time to read the toast.
    +
    In the below example, AutoHide="false" for Danger and Warning messages.
    + +
    + +
    +
    Change the Blazor Toasts placement according to your need. The default placement will be top right corner. Use the ToastsPlacement parameter to update the Blazor Toasts placement.
    + +
    + +
    +
    Blazor Toasts component shows a maximum of 5 toasts by default. If you add a new toast to the existing list, the first toast gets deleted like FIFO (First In First Out). Change the maximum capacity according to your need by using the StackLength parameter.
    +
    In the below example, StackLength is set to 3. It shows a maximum of 3 toast messages at any time.
    + +
    + +
    +
    1. Add the Toasts component in MainLayout.razor page as shown below.
    + + + Set the Toasts component parameters as per your requirement. + +
    2. Inject ToastService, then call the Notify(...) method as shown below.
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Toasts_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Tooltips/TooltipsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Tooltips/TooltipsDocumentation.razor index 6e5788273..5a8bffda6 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Tooltips/TooltipsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Tooltips/TooltipsDocumentation.razor @@ -11,40 +11,48 @@ - - +
    + +
    - - +
    + +
    By default, Button supports tooltips via TooltipTitle and TooltipPlacement parameters. See Buttons - Tooltip. - - +
    + +
    @* START: Commented Examples *@ -@* - +@*
    + +
    - -*@ +
    + +
    *@ @* END: Commented Examples *@ - -
    - Blazor Bootstrap includes several predefined tooltip styles, each serving its own semantic purpose. - The Color parameter can be used to customize the color of the tooltip. -
    - +
    +
    + Blazor Bootstrap includes several predefined tooltip styles, each serving its own semantic purpose. + The Color parameter can be used to customize the color of the tooltip. +
    + +
    - - +
    + +
    - - +
    + +
    @code { private const string pageUrl = RouteConstants.Demos_Tooltips_Documentation; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor index 983730563..241a54913 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor @@ -11,15 +11,17 @@ - -
    - -
    +
    +
    + +
    +
    - -
    - -
    +
    +
    + +
    +
    @code { private const string pageUrl = RouteConstants.Demos_ColorUtils_Documentation; From fc61ad2025c6206636dc5ea64925eba656da9647 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Mon, 4 Nov 2024 23:06:50 +0530 Subject: [PATCH 09/11] Demo.RCK - Section component updates --- .../Pages/Buttons/ButtonDocumentation.razor | 28 ++++++------- .../Pages/Callout/CalloutDocumentation.razor | 8 ++-- .../Pages/Card/CardDocumentation.razor | 28 ++++++------- .../Carousel/CarouselDocumentation.razor | 18 ++++----- .../BarCharts/BarChartDocumentation.razor | 12 +++--- .../Pages/Charts/ChartsDocumentation.razor | 6 +-- .../DoughnutChartDocumentation.razor | 6 +-- .../LineCharts/LineChartDocumentation.razor | 14 +++---- .../PieCharts/PieChartDocumentation.razor | 8 ++-- .../Collapse/CollapseDocumentation.razor | 8 ++-- .../ConfirmDialogDocumentation.razor | 14 +++---- .../Dropdowns/DropdownDocumentation.razor | 40 +++++++++---------- .../AutoCompleteDocumentation.razor | 16 ++++---- .../CurrencyInputDocumentation.razor | 26 ++++++------ .../DateInput/DateInputDocumentation.razor | 14 +++---- .../NumberInputDocumentation.razor | 18 ++++----- .../GettingStartedDocumentation.razor | 2 +- .../Grid_Overview_Documentation.razor | 4 +- .../Grid_DataBinding_Documentation.razor | 4 +- .../Grid_Filters_Documentation.razor | 14 +++---- .../04-paging/Grid_Paging_Documentation.razor | 8 ++-- .../Grid_Sorting_Documentation.razor | 6 +-- .../Grid_Selection_Documentation.razor | 8 ++-- .../Grid_Alignment_Documentation.razor | 4 +- .../Grid_GridSettings_Documentation.razor | 2 +- .../Grid_CustomCSSClass_Documentation.razor | 10 ++--- .../10-events/Grid_Events_Documentation.razor | 4 +- .../Grid_Translations_Documentation.razor | 2 +- .../Grid_FixedHeader_Documentation.razor | 4 +- .../Grid_FreezeColumns_Documentation.razor | 6 +-- .../Grid_DetailView_Documentation.razor | 4 +- .../Grid_Nested_Documentation.razor | 2 +- .../99-other/Grid_Other_Documentation.razor | 10 ++--- .../Pages/Icons/IconDocumentation.razor | 24 +++++------ .../Pages/Images/ImageDocumentation.razor | 6 +-- .../server/LayoutServerDocumentation.razor | 4 +- .../LayoutWebAssemblyDocumentation.razor | 4 +- .../Pages/Maps/GoogleMapDocumentation.razor | 26 ++++++------ .../Markdown/MarkdownDocumentation.razor | 30 +++++++------- .../Pages/Modal/ModalDocumentation.razor | 18 ++++----- .../Offcanvas/OffcanvasDocumentation.razor | 14 +++---- .../Pagination/PaginationDocumentation.razor | 12 +++--- .../PdfViewer/PdfViewerDocumentation.razor | 6 +-- .../ModalServiceDocumentation.razor | 14 +++---- .../ColorUtil/ColorUtilDocumentation.razor | 4 +- 45 files changed, 260 insertions(+), 260 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor index 70b8fea47..97a373ad4 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor @@ -11,16 +11,16 @@ -
    +
    Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
    -
    +
    -
    +
    @@ -28,14 +28,14 @@
    -
    +
    Fancy larger or smaller buttons? Add Size="ButtonSize.Large" or Size="ButtonSize.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.
    @@ -46,43 +46,43 @@
    -
    +
    -
    +
    -
    +
    -
    +
    Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
    -
    +
    -
    +
    Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
    -
    +
    -
    +
    Blazor Bootstrap includes several predefined tooltip styles, each serving its own semantic purpose. The TooltipColor parameter can be used to customize the color of the tooltip. @@ -94,7 +94,7 @@
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor index aca503ca1..8f2833659 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor @@ -11,19 +11,19 @@ -
    +
    -
    +
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor index 0c965be1d..07b8422a3 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor @@ -11,13 +11,13 @@ -
    +
    A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
    -
    +
    Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. @@ -25,36 +25,36 @@
    -
    +
    Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.
    -
    +
    The building block of a card is the CardBody. Use it whenever you need a padded section within a card.
    -
    +
    -
    +
    -
    +
    Create lists of content in a card with a flush list group.
    -
    +
    Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. @@ -62,14 +62,14 @@
    -
    +
    Add an optional header and/or footer within a card.
    -
    +
    Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities. @@ -77,18 +77,18 @@
    -
    +
    You can quickly change the text alignment of any card—in its entirety or specific parts—with our TextAlignment parameter.
    -
    +
    -
    +
    Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint. @@ -96,7 +96,7 @@
    -
    +
    When using card groups with footers, their content will automatically line up.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor index a4a401396..30348bc59 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor @@ -11,12 +11,12 @@ -
    +
    Here is a basic example of a carousel with three slides.
    -
    +
    You can add indicators to the carousel, alongside the previous/next controls. The indicators allow users to jump directly to a particular slide. @@ -25,7 +25,7 @@
    -
    +
    You can add captions to your slides with the CarouselCaption component within any CarouselItem. They can be easily hidden on smaller viewports. @@ -33,14 +33,14 @@
    -
    +
    To animate slides with a fading transition instead of sliding, set Crossfade to true.
    -
    +
    You can make your carousels autoplay on page load by setting the Autoplay parameter to CarouselAutoPlay.StartOnPageLoad. Autoplaying carousels automatically pause while hovered with the mouse. @@ -53,21 +53,21 @@
    -
    +
    Add Interval parameter to a CarouselItem component to change the amount of time to delay between automatically cycling to the next item.
    -
    +
    Hide the controls by setting ShowPreviousNextControls parameter to false.
    -
    +
    Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled by setting the Touch option to false. @@ -75,7 +75,7 @@
    -
    +
    Blazor Bootstrap Carousel component exposes a two events for hooking into Carousel functionality. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor index 473156efa..839a9c0c9 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor @@ -11,12 +11,12 @@ -
    +
    Refer to the getting started guide for setting up charts.
    -
    +
    In the following example, a categorical 12-color palette is used.
    @@ -26,20 +26,20 @@ -
    +
    -
    +
    -
    +
    By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE).
    -
    +
    @code { diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor index cddc32ab5..fe5ec01f6 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor @@ -11,11 +11,11 @@ -
    +
    -
    +
    At this moment we are supporting seven blazor chart types.
    1. Bar Chart
      2. @@ -32,7 +32,7 @@
    -
    +
    Refer to the getting started guide for setting up charts.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor index b1578587d..fe4e26d87 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor @@ -11,13 +11,13 @@ -
    +
    Refer to the getting started guide for setting up charts.
    -
    +
    In the following example, a categorical 12-color palette is used.
    @@ -28,7 +28,7 @@
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor index 58310b6d7..5071e7dad 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor @@ -11,13 +11,13 @@ -
    +
    Refer to the getting started guide for setting up charts.
    -
    +
    In the following example, a categorical 12-color palette is used.
    @@ -30,7 +30,7 @@
    -
    +
    By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE). @@ -38,19 +38,19 @@
    -
    +
    -
    +
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor index 997e395bb..d082307bd 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor @@ -11,13 +11,13 @@ -
    +
    Refer to the getting started guide for setting up charts.
    -
    +
    In the following example, a categorical 12-color palette is used.
    @@ -28,11 +28,11 @@
    -
    +
    -
    +
    This sample demonstrates how to change the position of the chart legend.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor index 933bbef86..953075322 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor @@ -11,7 +11,7 @@ -
    +
    The Collapse component is used to show and hide content. Use ShowAsync, HideAsync, and ToggleAsync methods to toggle the content. Collapsing an element will animate the height from its current value to 0. @@ -23,21 +23,21 @@
    -
    +
    Click the buttons below to show and hide the content.
    -
    +
    The Collapse component supports horizontal collapsing. Set the Horizontal parameter to true to enable horizontal collapsing.
    -
    +
    Blazor Bootstrap Collapse component exposes a few events for hooking into collapse functionality.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor index 1156663f5..b3883b230 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor @@ -11,12 +11,12 @@ -
    +
    -
    +
    Render different components dynamically within the confirm dialog without iterating through possible types or using conditional logic.
    @@ -31,21 +31,21 @@
    -
    +
    Use ConfirmDialogOptions to change the text and color of the button.
    -
    +
    Confirm dialog have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
    -
    +
    When dialogs become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
    @@ -54,7 +54,7 @@
    -
    +
    Add DialogOptions.IsVerticallyCentered="true" to vertically center the confirm dialog.
    @@ -63,7 +63,7 @@
    -
    +
    By default, auto focus on the "Yes" button is enabled. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor index 61d3dd60c..e97896731 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor @@ -11,55 +11,55 @@ -
    +
    -
    +
    -
    +
    -
    +
    -
    -
    +
    +
    To trigger DropdownMenu above elements, add the Direction="DropdownDirection.Dropup" to the Dropdown component.
    -
    +
    To center the DropdownMenu above the toggle, add the Direction="DropdownDirection.DropupCentered" to the Dropdown component.
    -
    +
    To trigger DropdownMenu at the right of elements, add the Direction="DropdownDirection.Dropend" to the Dropdown component.
    -
    +
    To trigger DropdownMenu at the left of elements, you can add the Direction="DropdownDirection.Dropstart" to the Dropdown component.
    -
    +
    To style DropdownItem as active, add the Active="true" parameter to the DropdownItem element in the DropdownMenu.
    -
    +
    To disable the dropdown, set the Disabled parameter to true on the Dropdown component.
    @@ -70,7 +70,7 @@
    -
    +

    By default, a DropdownMenu is automatically positioned at 100% from the top and along the left side of its parent. @@ -84,19 +84,19 @@

    -
    +
    -
    +
    Add a header to label sections of actions in any dropdown menu.
    -
    +
    Separate groups of related menu items with a divider.
    -
    +
    Place any freeform text within a dropdown menu with text and use spacing utilities. Note that youll likely need additional sizing styles to constrain the menu width. @@ -104,14 +104,14 @@
    -
    +
    Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.
    -
    +
    By default, the DropdownMenu is closed when clicking either inside or outside the DropdownMenu. You can use the AutoClose and AutoCloseBehavior parameters to change this behavior of the Dropdown. @@ -119,7 +119,7 @@
    -
    +
    @@ -151,7 +151,7 @@ -
    +
    All dropdown events are fired at the toggling element and then bubbled up. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor index 82219fbc3..843fc9057 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor @@ -13,11 +13,11 @@ -
    +
    -
    +
    In the below example, StringComparision.Ordinal is used to make the filter case-sensitive.
    @@ -25,19 +25,19 @@
    -
    +
    -
    +
    -
    +
    -
    +
    Blazor Bootstrap autocomplete component supports the following keyboard shortcuts to initiate various actions.
    @@ -81,7 +81,7 @@
    -
    +
    Use the Disabled parameter to disable the AutoComplete.
    Also, use Enable() and Disable() methods to enable and disable the AutoComplete.
    @@ -91,7 +91,7 @@
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor index 19cccaf9c..fd89900cd 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor @@ -13,7 +13,7 @@ -
    +
    By default, e + - are blocked. For all integral numeric types, dot . is blocked.
    The default locale is en-US. @@ -21,16 +21,16 @@
    -
    +
    -
    +
    Set HideCurrencySymbol parameter value to true to hide the currency symbol.
    -
    +
    In the below example, formatting adds zeros to display minimum integers and fractions.
    MinimumFractionDigits and MaximumFractionDigits parameters are applicable for floating-point numeric types only. @@ -38,17 +38,17 @@
    -
    +
    In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. You can enable this formatting by setting the CurrencySign option to Accounting. The default value is Standard.
    -
    +
    CurrencyInput is a generic component. Always specify the exact type. In the below example TValue is set to int, int?, float, float?, double, double?, decimal, and decimal?.
    -
    +
    Set EnableMinMax="true" and set the Min and Max parameters to restrict the user input between the Min and Max range.
    If the user tries to enter a number in the CurrencyInput field which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the Min value, then it will override with the Min value. @@ -57,17 +57,17 @@
    -
    +
    You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.
    -
    +
    By default, negative numbers are not allowed. Set the AllowNegativeNumbers parameter to true to allow the negative numbers.
    -
    +
    Use the Disabled parameter to disable the CurrencyInput.
    Also, use Enable() and Disable() methods to enable and disable the CurrencyInput.
    @@ -77,7 +77,7 @@
    -
    +
    Like any other blazor input components, CurrencyInput supports validations. Add the DataAnnotations on the CurrencyInput component to validate the user input before submitting the form. @@ -86,11 +86,11 @@
    -
    +
    -
    +
    This event fires on every user keystroke that changes the CurrencyInput value.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor index b0769c6fd..e7027bc69 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor @@ -13,7 +13,7 @@ -
    +
    The input UI generally varies from browser to browser. In unsupported browsers, the control degrades gracefully to type="text". @@ -22,7 +22,7 @@
    -
    +

    The Blazor Bootstrap DateInput component supports several data types: DateOnly, DateOnly?, DateTime, and DateTime?. @@ -35,7 +35,7 @@

    -
    +
    Set EnableMinMax="true" and set the Max and Min parameters to restrict the user input between the Min and Max range.
    @@ -46,7 +46,7 @@
    -
    +
    Use the Disabled parameter to disable the DateInput.
    Also, use Enable() and Disable() methods to enable and disable the DateInput.
    @@ -56,21 +56,21 @@
    -
    +
    Like any other blazor input component, DateInput component supports validations. Use the DataAnnotations to validate the user input before submitting the form. In the below example, we used the Required attributes.
    -
    +
    This event fires on every user keystroke/selection that changes the DateInput value.
    -
    +
    One common scenario is that the date fields are restricted based on the entry in another date field. In the example below, we restrict the course end time based on the selection of course start date. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInputDocumentation.razor index 5308fd223..e31ef318c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInputDocumentation.razor @@ -13,17 +13,17 @@ -
    +
    By default, e + - are blocked. For all integral numeric types, dot . is blocked.
    -
    +
    NumberInput is a generic component. Always specify the exact type. In the below example TValue is set to int, int?, float, float?, double, double?, decimal, and decimal?.
    -
    +
    Set EnableMinMax="true" and set the Min and Max parameters to restrict the user input between the Min and Max range.
    @@ -34,22 +34,22 @@
    -
    +
    The Step sets the stepping interval when clicking the up and down spinner buttons. If not explicitly included, Step defaults to 1.
    -
    +
    You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.
    -
    +
    By default, negative numbers are not allowed. Set the AllowNegativeNumbers parameter to true to allow the negative numbers.
    -
    +
    Use the Disabled parameter to disable the NumberInput.
    Also, use Enable() and Disable() methods to enable and disable the NumberInput.
    @@ -59,7 +59,7 @@
    -
    +
    Like any other blazor input component, NumberInput supports validations. Add the DataAnnotations on the NumberInput component to validate the user input before submitting the form. @@ -68,7 +68,7 @@
    -
    +
    This event fires on every user keystroke that changes the NumberInput value.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/GettingStarted/GettingStartedDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/GettingStarted/GettingStartedDocumentation.razor index 6657dfd44..00eb4beae 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/GettingStarted/GettingStartedDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/GettingStarted/GettingStartedDocumentation.razor @@ -15,7 +15,7 @@ -
    +
    Please find the getting started documentation links, corresponding to each .NET version and project type, listed below:
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Overview_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Overview_Documentation.razor index f2d3a5ffc..73954515a 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Overview_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Overview_Documentation.razor @@ -13,11 +13,11 @@ -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_DataBinding_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_DataBinding_Documentation.razor index ae2e87650..0317e0eb1 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_DataBinding_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_DataBinding_Documentation.razor @@ -11,12 +11,12 @@ -
    +
    Assign a collection to the Data parameter to render the grid dynamically. The example below will render different department employees in the individual grid.
    -
    +
    You can update the collection assigned to the Data parameter. In the below example, the grid will render the updated collection.

    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor index eacceca93..5833459d0 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor @@ -11,13 +11,13 @@ -

    +
    For filtering, AllowFiltering and PropertyName parameters are required.
    Add AllowFiltering="true" parameter to Grid and PropertyName parameter to all the GridColumns.
    -
    +
    In the below example, StringComparision.Ordinal is used on the Employee Name column to make the filter case-sensitive.
    By default, StringComparison.OrdinalIgnoreCase is used to compare culture-agnostic and case-insensitive string matching.
    @@ -25,7 +25,7 @@
    -
    +
    FilterOperator and FilterValue parameters are required to set the default filter.
    @@ -34,14 +34,14 @@
    -
    +
    Filterable parameter is required to disable the filter on a specific column. Add Filterable="false" parameter to GridColumn. The column filter is disabled on the Id column in the below example.
    -
    +
    Add FilterTextboxWidth parameter to the GridColumn to increase or decrease the filter textbox width, FilterTextboxWidth parameter is optional.
    Filter textbox width measured in pixels. @@ -57,11 +57,11 @@
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor index aab3b56cf..42d20cb9f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor @@ -11,24 +11,24 @@ -
    +
    For paging, AllowPaging and PageSize parameters are required.
    Add AllowPaging="true" and PageSize="20" parameters to the Grid. PageSize parameter is optional.
    The default page size is 10.
    -
    +
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor index 6ec99e9d6..4c2772613 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor @@ -11,13 +11,13 @@ -
    +
    For sorting, AllowSorting and SortKeySelector parameters are required.
    Add AllowSorting="true" parameter to Grid and SortKeySelector to all the GridColumns.
    -
    +
    IsDefaultSortColumn parameter is required to set the default sorting. Add IsDefaultSortColumn="true" parameter to the GridColumn.
    The default sort direction will be ascending. To change the default sorting of a column, add SortDirection="SortDirection.Descending" to the GridColumn.
    If more than one GridColumn has the IsDefaultSortColumn paramter, it will pick the first column as the default sorting column. @@ -25,7 +25,7 @@
    -
    +
    Add Sortable="false"parameter the GridColumn to disable the sorting. If sorting is disabled, then the SortKeySelector parameter is not required. The sorting is disabled on the Designation column in the below example.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor index 94f4be137..0b892f6af 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor @@ -11,7 +11,7 @@ -
    +
    Set AllowSelection="true" to enable the selection on the Grid. By default, SelectionMode is Single. @@ -19,7 +19,7 @@
    -
    +
    To select multiple rows, set SelectionMode="GridSelectionMode.Multiple".
    @@ -29,7 +29,7 @@
    -
    +
    We can disable the header checkbox or row level checkbox based on a condition. For this, we have DisableAllRowsSelection and DisableRowSelection delegate parameters. In the below example, we disabled the header checkbox if any of the employee Id is less than 105. @@ -38,7 +38,7 @@
    -
    +
    These CSS variables are used to set the default colors and background color of a row when it's selected. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor index 31f9bf294..5d07f7259 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor @@ -11,12 +11,12 @@ -
    +
    Use the HeaderTextAlignment parameter to change the header column alignment. By default, HeaderTextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End.
    -
    +
    Use the TextAlignment parameter to change the cell data alignment. By default, TextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor index 0a1051c2c..5f2c748db 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor @@ -11,7 +11,7 @@ -
    +
    This example shows how to save/load the Grid state. The state includes the page number, page size, and filters.
    In version 0.5.1 and above, the Grid sorting state is not included as part of GridSettings. We will add it in the subsequent releases. Browser local storage is used to persist the Grid state. Common locations exist for persisting state are Server-side storage, URL, Browser storage, and In-memory state container service. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor index 7a91ee84d..021c1487d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor @@ -11,27 +11,27 @@ -
    +
    In the below example, we applied table-danger CSS class to the row where the employee is inactive and the table-success CSS class to the row where the employee designation is Architect.
    -
    +
    In the below example, we applied table-danger CSS class to the Active column where the employee is inactive and the table-success CSS class to the Active column where the employee is active.
    -
    +
    In the following example, the Class parameter is used to apply the CSS class to an entire grid column, including the header.
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor index 2901b3000..c6741832f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor @@ -11,12 +11,12 @@ -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor index c63ca34dd..c0b28627f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor @@ -11,7 +11,7 @@ -
    +
    In the example below, you will see translations related to pagination and filters in Dutch.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor index 954b39b5f..3a49a1792 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor @@ -11,7 +11,7 @@ -
    +
    To set the fixed header, set the FixedHeader parameter to true. The minimum height of the grid is 320 pixels. You can change the units to em, pt, px, or etc. by setting the Unit parameter. @@ -19,7 +19,7 @@
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor index fc43af58e..1856302e8 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor @@ -11,16 +11,16 @@ -
    +
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor index 9b01e9f23..9b621a49c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor @@ -11,12 +11,12 @@ -
    +
    To enable detail view, set the AllowDetailView parameter to true. In the following example, existing <GridColumn> tags are nested under <GridColumns> tag to distinguish them from <GridDetailView>.
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor index dda8e7cff..70dead2c6 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor @@ -11,7 +11,7 @@ -
    +
    To create a nested grid, we first need to enable the detail view. To enable the detail view, set the AllowDetailView parameter to true. In the following example, existing <GridColumn> tags are nested under <GridColumns> tag to distinguish them from <GridDetailView>.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor index 9c43425fe..a8d4e919b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor @@ -11,28 +11,28 @@ -
    +
    To format the cell data, use ToString method and format strings. Refer: How to format numbers, dates, enums, and other types in .NET
    Example: @@context.Salary.ToString("N2").
    -
    +
    To prevent text from wrapping, add TextNoWrap="true" to the GridColumn.
    -
    +
    If there are no records to display in the Grid, by default, it will display the No records to display message. You can change this message by adding the EmptyText parameter to the Grid.
    -
    +
    Set the GridEmptyDataTemplate to customize the message displayed when the grid has no records.
    -
    +
    In the below example, we use <HeaderContent> and <ChildContent> tags to define custom column header and cell content. When defining header content, filters and sorting are removed from column.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor index b22db5e48..b666153e3 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor @@ -11,57 +11,57 @@ -
    +
    -
    +
    -
    +
    In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website.
    -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website.
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor index 53d2de8ee..5d516acc5 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor @@ -11,21 +11,21 @@ -
    +
    By default images are responsive. The default value of the IsResponsive parameter is true.
    -
    +
    To set the image to have a rounded 1px border appearance, set the IsThumbnail parameter to true.
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor index 31fa61f85..7231cc5da 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor @@ -11,7 +11,7 @@ -
    +
    Assuming you followed the getting started docs for the initial setup.
      @@ -21,7 +21,7 @@
    -
    +
    1. Replace MainLayout.razor page code with the below code.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor index 88ea87c90..0a73b4425 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor @@ -11,7 +11,7 @@ -
    +
    Assuming you followed the getting started docs for the initial setup.
      @@ -21,7 +21,7 @@
    -
    +
    1. Replace MainLayout.razor page code with the below code.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor index 7368c939c..d936d7a75 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor @@ -11,7 +11,7 @@ -
    +
    Before you start using the GoogleMap component in your project, you need an API key. Please follow the link below for detailed steps. @@ -19,47 +19,47 @@
    -
    +
    This example demonstrates how to use a simple Google Map component.
    -
    +
    This example demonstrates how to use a simple Google Map component with marker.
    -
    -
    +
    +
    To scale a marker, use the PinElement.Scale option.
    -
    +
    Use the PinElement.Background option to change the background color of a marker.
    -
    +
    Use the PinElement.BorderColor option to change the border color of a marker.
    -
    +
    Use the PinElement.GlyphColor option to change the glyph color of a marker.
    -
    +
    Set the PinElement.Glyph option to an empty string to hide a marker's glyph.
    -
    +
    Use the PinElement.UseIconFonts and PinElement.Glyph options to use the icon fonts.
    -
    +
    -
    +
    This example shows you how to make markers respond to click events. To make a marker clickable: Set the Clickable parameter to true. @@ -67,7 +67,7 @@
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor index 1b05c4f1d..050b86f4a 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor @@ -11,40 +11,40 @@ -
    +
    -
    +
    Use headers to structure your content. Start a line with # for a heading. Add more # characters for subheadings, up to six levels.
    -
    +
    Break your text into paragraphs or line breaks for easier reading.
    -
    +
    Quote text with > before it. Use more > characters to nest quotes. For blocks of text, use > at the start of each line.
    -
    +
    Add a horizontal rule with a line of ---.
    -
    +
    Emphasize text with bold, italics, or strikethrough:
      @@ -57,12 +57,12 @@
    -
    +
    -
    +
    Tables help organize structured data.
      @@ -77,7 +77,7 @@
    -
    +
    Use lists to organize related items:
      @@ -88,17 +88,17 @@
    -
    +
    -
    +
    -
    +
    @@ -107,17 +107,17 @@
    -
    +
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor index 9e7f49694..028932048 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor @@ -11,11 +11,11 @@ -
    +
    -
    +
    Render different components dynamically within the modal without iterating through possible types or using conditional logic.
    If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. @@ -25,7 +25,7 @@
    -
    +
    Event callbacks (EventCallback) can be passed in its parameter dictionary.
    In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. @@ -40,12 +40,12 @@
    -
    +
    When UseStaticBackdrop is set to true, the modal will not close when clicking outside it. Click the button below to try it.
    -
    +
    When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
    @@ -53,22 +53,22 @@
    -
    +
    Add IsVerticallyCentered="true" to vertically center the modal.
    -
    +
    Modals have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
    -
    +
    -
    +
    Blazor Bootstrap modal class exposes a few events for hooking into modal functionality.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor index d8e246381..d54acfa9e 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor @@ -13,11 +13,11 @@ Similar to modals, only one offcanvas can be shown at a time. -
    +
    -
    +
    Render different components dynamically within the offcanvas without iterating through possible types or using conditional logic.
    If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. @@ -27,7 +27,7 @@
    -
    +
    Event callbacks (EventCallback) can be passed in its parameter dictionary.
    In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. @@ -42,25 +42,25 @@
    -
    +
    Try the top, bottom, and left examples out below.
    Default placement for the offcanvas component is right. -
    +
    When UseStaticBackdrop is set to true, the offcanvas will not close when clicking outside of it.
    -
    +
    Set the size of the Offcanvas with the Size parameter. The default value is OffcanvasSize.Regular.
    -
    +
    Blazor Bootstrap offcanvas component exposes a few events for hooking into offcanvas functionality.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor index 60f8627c5..7690928eb 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor @@ -11,29 +11,29 @@ -
    +
    We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links.
    -
    +
    -
    +
    -
    +
    Fancy larger or smaller pagination? Add Size="PaginationSize.Small" or Size="PaginationSize.Large" for additional sizes.
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor index 3c73080aa..e9c227cb2 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor @@ -11,18 +11,18 @@ -
    +
    -
    +
    Set the Orientation parameter to Orientation.Landscape to change the default orientation from Portrait to Landscape.
    -
    +
    PDF Viewer component supports base64 string as a URL.
    Url="@@string.Format("data:application/pdf;base64,{0}", pdfBase64String)" diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor index f7afe52ee..4ab73d463 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor @@ -13,31 +13,31 @@ -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    1. Add the Modal component in MainLayout.razor page as shown below.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor index 241a54913..569c6f7ab 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor @@ -11,13 +11,13 @@ -
    +
    -
    +
    From 9683d59853716d3aa6b63dee0a9d5dae60a855db Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Mon, 4 Nov 2024 23:07:36 +0530 Subject: [PATCH 10/11] Demo.RCL - section component updates --- .../Placeholders/PlaceholderDocumentation.razor | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Placeholders/PlaceholderDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Placeholders/PlaceholderDocumentation.razor index 68c000645..a37377a20 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Placeholders/PlaceholderDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Placeholders/PlaceholderDocumentation.razor @@ -11,32 +11,32 @@ -
    +
    Placeholders can be used to enhance the experience of your application.
    -
    +
    -
    +
    You can change the width through PlaceholderWidth, width utilities, or inline styles.
    -
    +
    By default, the placeholder uses currentColor. This can be overridden with the Color property of type enum.
    -
    +
    The size of placeholders are based on the typographic style of the parent element. Customize them with Size property of type enum.
    -
    +
    Animate placeholders with PlaceholderAnimation.Glow or PlaceholderAnimation.Wave to better convey the perception of something being actively loaded.
    From f11d0aa6f3fe3c1e22cb36c40ef75edacad42c23 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Mon, 4 Nov 2024 23:08:58 +0530 Subject: [PATCH 11/11] Demo.RCL - Section component param updates --- .../Pages/Buttons/ButtonDocumentation.razor | 28 ++++++------- .../Pages/Callout/CalloutDocumentation.razor | 8 ++-- .../Pages/Card/CardDocumentation.razor | 28 ++++++------- .../Carousel/CarouselDocumentation.razor | 18 ++++----- .../BarCharts/BarChartDocumentation.razor | 12 +++--- .../Pages/Charts/ChartsDocumentation.razor | 6 +-- .../DoughnutChartDocumentation.razor | 6 +-- .../LineCharts/LineChartDocumentation.razor | 14 +++---- .../PieCharts/PieChartDocumentation.razor | 8 ++-- .../PolarAreaChartDocumentation.razor | 4 +- .../RadarCharts/RadarChartDocumentation.razor | 4 +- .../ScatterChartDocumentation.razor | 6 +-- .../Collapse/CollapseDocumentation.razor | 8 ++-- .../ConfirmDialogDocumentation.razor | 14 +++---- .../Dropdowns/DropdownDocumentation.razor | 40 +++++++++---------- .../AutoCompleteDocumentation.razor | 16 ++++---- .../CurrencyInputDocumentation.razor | 26 ++++++------ .../DateInput/DateInputDocumentation.razor | 14 +++---- .../NumberInputDocumentation.razor | 18 ++++----- .../RangeInput/RangeInputDocumentation.razor | 12 +++--- .../Form/Switch/SwitchDocumentation.razor | 10 ++--- .../TimeInput/TimeInputDocumentation.razor | 14 +++---- .../GettingStartedDocumentation.razor | 2 +- .../Grid_Overview_Documentation.razor | 4 +- .../Grid_DataBinding_Documentation.razor | 4 +- .../Grid_Filters_Documentation.razor | 14 +++---- .../04-paging/Grid_Paging_Documentation.razor | 8 ++-- .../Grid_Sorting_Documentation.razor | 6 +-- .../Grid_Selection_Documentation.razor | 8 ++-- .../Grid_Alignment_Documentation.razor | 4 +- .../Grid_GridSettings_Documentation.razor | 2 +- .../Grid_CustomCSSClass_Documentation.razor | 10 ++--- .../10-events/Grid_Events_Documentation.razor | 4 +- .../Grid_Translations_Documentation.razor | 2 +- .../Grid_FixedHeader_Documentation.razor | 4 +- .../Grid_FreezeColumns_Documentation.razor | 6 +-- .../Grid_DetailView_Documentation.razor | 4 +- .../Grid_Nested_Documentation.razor | 2 +- .../99-other/Grid_Other_Documentation.razor | 10 ++--- .../Pages/Icons/IconDocumentation.razor | 24 +++++------ .../Pages/Images/ImageDocumentation.razor | 6 +-- .../server/LayoutServerDocumentation.razor | 4 +- .../LayoutWebAssemblyDocumentation.razor | 4 +- .../Pages/Maps/GoogleMapDocumentation.razor | 26 ++++++------ .../Markdown/MarkdownDocumentation.razor | 30 +++++++------- .../Pages/Modal/ModalDocumentation.razor | 18 ++++----- .../Offcanvas/OffcanvasDocumentation.razor | 14 +++---- .../Pagination/PaginationDocumentation.razor | 12 +++--- .../PdfViewer/PdfViewerDocumentation.razor | 6 +-- .../PlaceholderDocumentation.razor | 12 +++--- .../Pages/Preload/PreloadDocumentation.razor | 8 ++-- .../Progress/ProgressDocumentation.razor | 20 +++++----- .../Pages/Ribbon/RibbonDocumentation.razor | 4 +- .../ScriptLoaderDocumentation.razor | 4 +- .../ModalServiceDocumentation.razor | 14 +++---- .../Pages/Sidebar/SidebarDocumentation.razor | 22 +++++----- .../Sidebar2/Sidebar2Documentation.razor | 14 +++---- .../SortableListDocumentation.razor | 20 +++++----- .../Spinners/SpinnersDocumentation.razor | 24 +++++------ .../Pages/Tabs/TabsDocumentation.razor | 32 +++++++-------- .../Pages/Toasts/ToastsDocumentation.razor | 16 ++++---- .../Tooltips/TooltipsDocumentation.razor | 16 ++++---- .../ColorUtil/ColorUtilDocumentation.razor | 4 +- 63 files changed, 381 insertions(+), 381 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor index 97a373ad4..0ac15eb22 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor @@ -11,16 +11,16 @@ -
    +
    Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
    -
    +
    -
    +
    @@ -28,14 +28,14 @@
    -
    +
    Fancy larger or smaller buttons? Add Size="ButtonSize.Large" or Size="ButtonSize.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.
    @@ -46,43 +46,43 @@
    -
    +
    -
    +
    -
    +
    -
    +
    Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
    -
    +
    -
    +
    Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
    -
    +
    -
    +
    Blazor Bootstrap includes several predefined tooltip styles, each serving its own semantic purpose. The TooltipColor parameter can be used to customize the color of the tooltip. @@ -94,7 +94,7 @@
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor index 8f2833659..61564e389 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor @@ -11,19 +11,19 @@ -
    +
    -
    +
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor index 07b8422a3..1537aeabf 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor @@ -11,13 +11,13 @@ -
    +
    A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
    -
    +
    Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. @@ -25,36 +25,36 @@
    -
    +
    Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.
    -
    +
    The building block of a card is the CardBody. Use it whenever you need a padded section within a card.
    -
    +
    -
    +
    -
    +
    Create lists of content in a card with a flush list group.
    -
    +
    Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. @@ -62,14 +62,14 @@
    -
    +
    Add an optional header and/or footer within a card.
    -
    +
    Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities. @@ -77,18 +77,18 @@
    -
    +
    You can quickly change the text alignment of any card—in its entirety or specific parts—with our TextAlignment parameter.
    -
    +
    -
    +
    Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint. @@ -96,7 +96,7 @@
    -
    +
    When using card groups with footers, their content will automatically line up.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor index 30348bc59..ec55ccdce 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor @@ -11,12 +11,12 @@ -
    +
    Here is a basic example of a carousel with three slides.
    -
    +
    You can add indicators to the carousel, alongside the previous/next controls. The indicators allow users to jump directly to a particular slide. @@ -25,7 +25,7 @@
    -
    +
    You can add captions to your slides with the CarouselCaption component within any CarouselItem. They can be easily hidden on smaller viewports. @@ -33,14 +33,14 @@
    -
    +
    To animate slides with a fading transition instead of sliding, set Crossfade to true.
    -
    +
    You can make your carousels autoplay on page load by setting the Autoplay parameter to CarouselAutoPlay.StartOnPageLoad. Autoplaying carousels automatically pause while hovered with the mouse. @@ -53,21 +53,21 @@
    -
    +
    Add Interval parameter to a CarouselItem component to change the amount of time to delay between automatically cycling to the next item.
    -
    +
    Hide the controls by setting ShowPreviousNextControls parameter to false.
    -
    +
    Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled by setting the Touch option to false. @@ -75,7 +75,7 @@
    -
    +
    Blazor Bootstrap Carousel component exposes a two events for hooking into Carousel functionality.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor index 839a9c0c9..45adfccd6 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor @@ -11,12 +11,12 @@ -
    +
    Refer to the getting started guide for setting up charts.
    -
    +
    In the following example, a categorical 12-color palette is used.
    @@ -26,20 +26,20 @@ -
    +
    -
    +
    -
    +
    By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE).
    -
    +
    @code { diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor index fe5ec01f6..211eb96f0 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor @@ -11,11 +11,11 @@ -
    +
    -
    +
    At this moment we are supporting seven blazor chart types.
    1. Bar Chart
      2. @@ -32,7 +32,7 @@
    -
    +
    Refer to the getting started guide for setting up charts.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor index fe4e26d87..9b8b9897d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor @@ -11,13 +11,13 @@ -
    +
    Refer to the getting started guide for setting up charts.
    -
    +
    In the following example, a categorical 12-color palette is used.
    @@ -28,7 +28,7 @@
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor index 5071e7dad..441b7f087 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor @@ -11,13 +11,13 @@ -
    +
    Refer to the getting started guide for setting up charts.
    -
    +
    In the following example, a categorical 12-color palette is used.
    @@ -30,7 +30,7 @@
    -
    +
    By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE). @@ -38,19 +38,19 @@
    -
    +
    -
    +
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor index d082307bd..3434be298 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor @@ -11,13 +11,13 @@ -
    +
    Refer to the getting started guide for setting up charts.
    -
    +
    In the following example, a categorical 12-color palette is used.
    @@ -28,11 +28,11 @@
    -
    +
    -
    +
    This sample demonstrates how to change the position of the chart legend.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor index ee00dea82..99f094b0c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor @@ -11,13 +11,13 @@ -
    +
    Refer to the getting started guide for setting up charts.
    -
    +
    In the following example, a categorical 12-color palette is used.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor index 55e7d6fba..fd7c9fc7f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor @@ -11,13 +11,13 @@ -
    +
    Refer to the getting started guide for setting up charts.
    -
    +
    In the following example, a categorical 12-color palette is used.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor index 52635f66c..5dd3dbe73 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor @@ -11,13 +11,13 @@ -
    +
    Refer to the getting started guide for setting up charts.
    -
    +
    In the following example, a categorical 12-color palette is used.
    @@ -28,7 +28,7 @@
    -
    +
    In the following example, you can randomize the data and datasets dynamically. Along with this, the ScatterChartOptions are updated. With these changes, the scatter chart is responsive, and when hovered over, the points' radius increases for better visibility to the end-user. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor index 953075322..f1aaa1d56 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor @@ -11,7 +11,7 @@ -
    +
    The Collapse component is used to show and hide content. Use ShowAsync, HideAsync, and ToggleAsync methods to toggle the content. Collapsing an element will animate the height from its current value to 0. @@ -23,21 +23,21 @@
    -
    +
    Click the buttons below to show and hide the content.
    -
    +
    The Collapse component supports horizontal collapsing. Set the Horizontal parameter to true to enable horizontal collapsing.
    -
    +
    Blazor Bootstrap Collapse component exposes a few events for hooking into collapse functionality.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor index b3883b230..6b967413c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor @@ -11,12 +11,12 @@ -
    +
    -
    +
    Render different components dynamically within the confirm dialog without iterating through possible types or using conditional logic.
    @@ -31,21 +31,21 @@
    -
    +
    Use ConfirmDialogOptions to change the text and color of the button.
    -
    +
    Confirm dialog have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
    -
    +
    When dialogs become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
    @@ -54,7 +54,7 @@
    -
    +
    Add DialogOptions.IsVerticallyCentered="true" to vertically center the confirm dialog.
    @@ -63,7 +63,7 @@
    -
    +
    By default, auto focus on the "Yes" button is enabled. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor index e97896731..af7d67f04 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor @@ -11,55 +11,55 @@ -
    +
    -
    +
    -
    +
    -
    +
    -
    -
    +
    +
    To trigger DropdownMenu above elements, add the Direction="DropdownDirection.Dropup" to the Dropdown component.
    -
    +
    To center the DropdownMenu above the toggle, add the Direction="DropdownDirection.DropupCentered" to the Dropdown component.
    -
    +
    To trigger DropdownMenu at the right of elements, add the Direction="DropdownDirection.Dropend" to the Dropdown component.
    -
    +
    To trigger DropdownMenu at the left of elements, you can add the Direction="DropdownDirection.Dropstart" to the Dropdown component.
    -
    +
    To style DropdownItem as active, add the Active="true" parameter to the DropdownItem element in the DropdownMenu.
    -
    +
    To disable the dropdown, set the Disabled parameter to true on the Dropdown component.
    @@ -70,7 +70,7 @@
    -
    +

    By default, a DropdownMenu is automatically positioned at 100% from the top and along the left side of its parent. @@ -84,19 +84,19 @@

    -
    +
    -
    +
    Add a header to label sections of actions in any dropdown menu.
    -
    +
    Separate groups of related menu items with a divider.
    -
    +
    Place any freeform text within a dropdown menu with text and use spacing utilities. Note that youll likely need additional sizing styles to constrain the menu width. @@ -104,14 +104,14 @@
    -
    +
    Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.
    -
    +
    By default, the DropdownMenu is closed when clicking either inside or outside the DropdownMenu. You can use the AutoClose and AutoCloseBehavior parameters to change this behavior of the Dropdown. @@ -119,7 +119,7 @@
    -
    +
    @@ -151,7 +151,7 @@ -
    +
    All dropdown events are fired at the toggling element and then bubbled up. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor index 843fc9057..4c0f008b9 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor @@ -13,11 +13,11 @@ -
    +
    -
    +
    In the below example, StringComparision.Ordinal is used to make the filter case-sensitive.
    @@ -25,19 +25,19 @@
    -
    +
    -
    +
    -
    +
    -
    +
    Blazor Bootstrap autocomplete component supports the following keyboard shortcuts to initiate various actions.
    @@ -81,7 +81,7 @@
    -
    +
    Use the Disabled parameter to disable the AutoComplete.
    Also, use Enable() and Disable() methods to enable and disable the AutoComplete.
    @@ -91,7 +91,7 @@
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor index fd89900cd..f4a2088a2 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor @@ -13,7 +13,7 @@ -
    +
    By default, e + - are blocked. For all integral numeric types, dot . is blocked.
    The default locale is en-US. @@ -21,16 +21,16 @@
    -
    +
    -
    +
    Set HideCurrencySymbol parameter value to true to hide the currency symbol.
    -
    +
    In the below example, formatting adds zeros to display minimum integers and fractions.
    MinimumFractionDigits and MaximumFractionDigits parameters are applicable for floating-point numeric types only. @@ -38,17 +38,17 @@
    -
    +
    In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. You can enable this formatting by setting the CurrencySign option to Accounting. The default value is Standard.
    -
    +
    CurrencyInput is a generic component. Always specify the exact type. In the below example TValue is set to int, int?, float, float?, double, double?, decimal, and decimal?.
    -
    +
    Set EnableMinMax="true" and set the Min and Max parameters to restrict the user input between the Min and Max range.
    If the user tries to enter a number in the CurrencyInput field which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the Min value, then it will override with the Min value. @@ -57,17 +57,17 @@
    -
    +
    You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.
    -
    +
    By default, negative numbers are not allowed. Set the AllowNegativeNumbers parameter to true to allow the negative numbers.
    -
    +
    Use the Disabled parameter to disable the CurrencyInput.
    Also, use Enable() and Disable() methods to enable and disable the CurrencyInput.
    @@ -77,7 +77,7 @@
    -
    +
    Like any other blazor input components, CurrencyInput supports validations. Add the DataAnnotations on the CurrencyInput component to validate the user input before submitting the form. @@ -86,11 +86,11 @@
    -
    +
    -
    +
    This event fires on every user keystroke that changes the CurrencyInput value.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor index e7027bc69..0e77f37d2 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor @@ -13,7 +13,7 @@ -
    +
    The input UI generally varies from browser to browser. In unsupported browsers, the control degrades gracefully to type="text". @@ -22,7 +22,7 @@
    -
    +

    The Blazor Bootstrap DateInput component supports several data types: DateOnly, DateOnly?, DateTime, and DateTime?. @@ -35,7 +35,7 @@

    -
    +
    Set EnableMinMax="true" and set the Max and Min parameters to restrict the user input between the Min and Max range.
    @@ -46,7 +46,7 @@
    -
    +
    Use the Disabled parameter to disable the DateInput.
    Also, use Enable() and Disable() methods to enable and disable the DateInput.
    @@ -56,21 +56,21 @@
    -
    +
    Like any other blazor input component, DateInput component supports validations. Use the DataAnnotations to validate the user input before submitting the form. In the below example, we used the Required attributes.
    -
    +
    This event fires on every user keystroke/selection that changes the DateInput value.
    -
    +
    One common scenario is that the date fields are restricted based on the entry in another date field. In the example below, we restrict the course end time based on the selection of course start date. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInputDocumentation.razor index e31ef318c..819c761fc 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInputDocumentation.razor @@ -13,17 +13,17 @@ -
    +
    By default, e + - are blocked. For all integral numeric types, dot . is blocked.
    -
    +
    NumberInput is a generic component. Always specify the exact type. In the below example TValue is set to int, int?, float, float?, double, double?, decimal, and decimal?.
    -
    +
    Set EnableMinMax="true" and set the Min and Max parameters to restrict the user input between the Min and Max range.
    @@ -34,22 +34,22 @@
    -
    +
    The Step sets the stepping interval when clicking the up and down spinner buttons. If not explicitly included, Step defaults to 1.
    -
    +
    You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.
    -
    +
    By default, negative numbers are not allowed. Set the AllowNegativeNumbers parameter to true to allow the negative numbers.
    -
    +
    Use the Disabled parameter to disable the NumberInput.
    Also, use Enable() and Disable() methods to enable and disable the NumberInput.
    @@ -59,7 +59,7 @@
    -
    +
    Like any other blazor input component, NumberInput supports validations. Add the DataAnnotations on the NumberInput component to validate the user input before submitting the form. @@ -68,7 +68,7 @@
    -
    +
    This event fires on every user keystroke that changes the NumberInput value.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor index 81786bc1d..2aea480b1 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor @@ -13,13 +13,13 @@ -
    +
    -
    +
    Use the Disabled parameter to disable the RangeInput.
    Also, use Enable() and Disable() methods to enable and disable the RangeInput.
    @@ -29,7 +29,7 @@
    -
    +
    Set the Min and Max parameters to restrict the user input between the Min and Max range. By default, the minimum is 0. @@ -46,17 +46,17 @@
    -
    +
    The Step parameter is a number that specifies the granularity that the value must adhere to. Only values that match the specified stepping interval are valid.
    -
    +
    -
    +
    To add tick marks to a RangeInput, set the TickMarks parameter.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor index 83041f0fb..13b7966c8 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor @@ -13,11 +13,11 @@ -
    +
    -
    +
    Use the Disabled parameter to disable the Switch.
    Also, use Enable() and Disable() methods to enable and disable the Switch.
    @@ -27,21 +27,21 @@
    -
    +
    Put your switches on the opposite side by using the Reverse parameter.
    -
    +
    This event fired when the Switch selection changed.
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor index 8a9d8bfaf..c05d9da9d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor @@ -13,7 +13,7 @@ -
    +
    The input UI generally varies from browser to browser. In unsupported browsers, the control degrades gracefully to type="text". @@ -22,7 +22,7 @@
    -
    +

    The Blazor Bootstrap TimeInput component supports TimeOnly and TimeOnly?. @@ -32,7 +32,7 @@

    -
    +
    Set EnableMinMax="true" and set the Max and Min parameters to restrict the user input between the Min and Max range.
    @@ -43,7 +43,7 @@
    -
    +
    Use the Disabled parameter to disable the TimeInput.
    Also, use Enable() and Disable() methods to enable and disable the TimeInput.
    @@ -53,21 +53,21 @@
    -
    +
    Like any other blazor input component, TimeInput component supports validations. Use the DataAnnotations to validate the user input before submitting the form. In the below example, we used the Required attributes.
    -
    +
    This event fires on every user keystroke/selection that changes the TimeInput value.
    -
    +
    One common scenario is that the time fields are restricted based on the entry in another time field. In the example below, we restrict the arrival time based on the selection of departure. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/GettingStarted/GettingStartedDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/GettingStarted/GettingStartedDocumentation.razor index 00eb4beae..839fbd92d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/GettingStarted/GettingStartedDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/GettingStarted/GettingStartedDocumentation.razor @@ -15,7 +15,7 @@ -
    +
    Please find the getting started documentation links, corresponding to each .NET version and project type, listed below:
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Overview_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Overview_Documentation.razor index 73954515a..adf4edaa6 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Overview_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Overview_Documentation.razor @@ -13,11 +13,11 @@ -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_DataBinding_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_DataBinding_Documentation.razor index 0317e0eb1..238af3097 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_DataBinding_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_DataBinding_Documentation.razor @@ -11,12 +11,12 @@ -
    +
    Assign a collection to the Data parameter to render the grid dynamically. The example below will render different department employees in the individual grid.
    -
    +
    You can update the collection assigned to the Data parameter. In the below example, the grid will render the updated collection.

    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor index 5833459d0..5b2854421 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor @@ -11,13 +11,13 @@ -

    +
    For filtering, AllowFiltering and PropertyName parameters are required.
    Add AllowFiltering="true" parameter to Grid and PropertyName parameter to all the GridColumns.
    -
    +
    In the below example, StringComparision.Ordinal is used on the Employee Name column to make the filter case-sensitive.
    By default, StringComparison.OrdinalIgnoreCase is used to compare culture-agnostic and case-insensitive string matching.
    @@ -25,7 +25,7 @@
    -
    +
    FilterOperator and FilterValue parameters are required to set the default filter.
    @@ -34,14 +34,14 @@
    -
    +
    Filterable parameter is required to disable the filter on a specific column. Add Filterable="false" parameter to GridColumn. The column filter is disabled on the Id column in the below example.
    -
    +
    Add FilterTextboxWidth parameter to the GridColumn to increase or decrease the filter textbox width, FilterTextboxWidth parameter is optional.
    Filter textbox width measured in pixels. @@ -57,11 +57,11 @@
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor index 42d20cb9f..959fe0faf 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor @@ -11,24 +11,24 @@ -
    +
    For paging, AllowPaging and PageSize parameters are required.
    Add AllowPaging="true" and PageSize="20" parameters to the Grid. PageSize parameter is optional.
    The default page size is 10.
    -
    +
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor index 4c2772613..256ed0b4d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor @@ -11,13 +11,13 @@ -
    +
    For sorting, AllowSorting and SortKeySelector parameters are required.
    Add AllowSorting="true" parameter to Grid and SortKeySelector to all the GridColumns.
    -
    +
    IsDefaultSortColumn parameter is required to set the default sorting. Add IsDefaultSortColumn="true" parameter to the GridColumn.
    The default sort direction will be ascending. To change the default sorting of a column, add SortDirection="SortDirection.Descending" to the GridColumn.
    If more than one GridColumn has the IsDefaultSortColumn paramter, it will pick the first column as the default sorting column. @@ -25,7 +25,7 @@
    -
    +
    Add Sortable="false"parameter the GridColumn to disable the sorting. If sorting is disabled, then the SortKeySelector parameter is not required. The sorting is disabled on the Designation column in the below example.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor index 0b892f6af..a2c2fc9a2 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor @@ -11,7 +11,7 @@ -
    +
    Set AllowSelection="true" to enable the selection on the Grid. By default, SelectionMode is Single. @@ -19,7 +19,7 @@
    -
    +
    To select multiple rows, set SelectionMode="GridSelectionMode.Multiple".
    @@ -29,7 +29,7 @@
    -
    +
    We can disable the header checkbox or row level checkbox based on a condition. For this, we have DisableAllRowsSelection and DisableRowSelection delegate parameters. In the below example, we disabled the header checkbox if any of the employee Id is less than 105. @@ -38,7 +38,7 @@
    -
    +
    These CSS variables are used to set the default colors and background color of a row when it's selected. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor index 5d07f7259..491475b2b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor @@ -11,12 +11,12 @@ -
    +
    Use the HeaderTextAlignment parameter to change the header column alignment. By default, HeaderTextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End.
    -
    +
    Use the TextAlignment parameter to change the cell data alignment. By default, TextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor index 5f2c748db..9769c0440 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor @@ -11,7 +11,7 @@ -
    +
    This example shows how to save/load the Grid state. The state includes the page number, page size, and filters.
    In version 0.5.1 and above, the Grid sorting state is not included as part of GridSettings. We will add it in the subsequent releases. Browser local storage is used to persist the Grid state. Common locations exist for persisting state are Server-side storage, URL, Browser storage, and In-memory state container service. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor index 021c1487d..5665dd992 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor @@ -11,27 +11,27 @@ -
    +
    In the below example, we applied table-danger CSS class to the row where the employee is inactive and the table-success CSS class to the row where the employee designation is Architect.
    -
    +
    In the below example, we applied table-danger CSS class to the Active column where the employee is inactive and the table-success CSS class to the Active column where the employee is active.
    -
    +
    In the following example, the Class parameter is used to apply the CSS class to an entire grid column, including the header.
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor index c6741832f..3da3389f2 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor @@ -11,12 +11,12 @@ -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor index c0b28627f..7fae7fe21 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor @@ -11,7 +11,7 @@ -
    +
    In the example below, you will see translations related to pagination and filters in Dutch.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor index 3a49a1792..7ba88932c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor @@ -11,7 +11,7 @@ -
    +
    To set the fixed header, set the FixedHeader parameter to true. The minimum height of the grid is 320 pixels. You can change the units to em, pt, px, or etc. by setting the Unit parameter. @@ -19,7 +19,7 @@
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor index 1856302e8..bc3007bfa 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor @@ -11,16 +11,16 @@ -
    +
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor index 9b621a49c..c7d78be9f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor @@ -11,12 +11,12 @@ -
    +
    To enable detail view, set the AllowDetailView parameter to true. In the following example, existing <GridColumn> tags are nested under <GridColumns> tag to distinguish them from <GridDetailView>.
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor index 70dead2c6..061072d92 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor @@ -11,7 +11,7 @@ -
    +
    To create a nested grid, we first need to enable the detail view. To enable the detail view, set the AllowDetailView parameter to true. In the following example, existing <GridColumn> tags are nested under <GridColumns> tag to distinguish them from <GridDetailView>.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor index a8d4e919b..df13ae1b4 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor @@ -11,28 +11,28 @@ -
    +
    To format the cell data, use ToString method and format strings. Refer: How to format numbers, dates, enums, and other types in .NET
    Example: @@context.Salary.ToString("N2").
    -
    +
    To prevent text from wrapping, add TextNoWrap="true" to the GridColumn.
    -
    +
    If there are no records to display in the Grid, by default, it will display the No records to display message. You can change this message by adding the EmptyText parameter to the Grid.
    -
    +
    Set the GridEmptyDataTemplate to customize the message displayed when the grid has no records.
    -
    +
    In the below example, we use <HeaderContent> and <ChildContent> tags to define custom column header and cell content. When defining header content, filters and sorting are removed from column.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor index b666153e3..4248bc0c2 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor @@ -11,57 +11,57 @@ -
    +
    -
    +
    -
    +
    In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website.
    -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website.
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor index 5d516acc5..afbd46df7 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor @@ -11,21 +11,21 @@ -
    +
    By default images are responsive. The default value of the IsResponsive parameter is true.
    -
    +
    To set the image to have a rounded 1px border appearance, set the IsThumbnail parameter to true.
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor index 7231cc5da..6676c5df0 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor @@ -11,7 +11,7 @@ -
    +
    Assuming you followed the getting started docs for the initial setup.
      @@ -21,7 +21,7 @@
    -
    +
    1. Replace MainLayout.razor page code with the below code.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor index 0a73b4425..a1b64fcbb 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor @@ -11,7 +11,7 @@ -
    +
    Assuming you followed the getting started docs for the initial setup.
      @@ -21,7 +21,7 @@
    -
    +
    1. Replace MainLayout.razor page code with the below code.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor index d936d7a75..ecc5f8e76 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor @@ -11,7 +11,7 @@ -
    +
    Before you start using the GoogleMap component in your project, you need an API key. Please follow the link below for detailed steps. @@ -19,47 +19,47 @@
    -
    +
    This example demonstrates how to use a simple Google Map component.
    -
    +
    This example demonstrates how to use a simple Google Map component with marker.
    -
    -
    +
    +
    To scale a marker, use the PinElement.Scale option.
    -
    +
    Use the PinElement.Background option to change the background color of a marker.
    -
    +
    Use the PinElement.BorderColor option to change the border color of a marker.
    -
    +
    Use the PinElement.GlyphColor option to change the glyph color of a marker.
    -
    +
    Set the PinElement.Glyph option to an empty string to hide a marker's glyph.
    -
    +
    Use the PinElement.UseIconFonts and PinElement.Glyph options to use the icon fonts.
    -
    +
    -
    +
    This example shows you how to make markers respond to click events. To make a marker clickable: Set the Clickable parameter to true. @@ -67,7 +67,7 @@
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor index 050b86f4a..e27df3ec0 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor @@ -11,40 +11,40 @@ -
    +
    -
    +
    Use headers to structure your content. Start a line with # for a heading. Add more # characters for subheadings, up to six levels.
    -
    +
    Break your text into paragraphs or line breaks for easier reading.
    -
    +
    Quote text with > before it. Use more > characters to nest quotes. For blocks of text, use > at the start of each line.
    -
    +
    Add a horizontal rule with a line of ---.
    -
    +
    Emphasize text with bold, italics, or strikethrough:
      @@ -57,12 +57,12 @@
    -
    +
    -
    +
    Tables help organize structured data.
      @@ -77,7 +77,7 @@
    -
    +
    Use lists to organize related items:
      @@ -88,17 +88,17 @@
    -
    +
    -
    +
    -
    +
    @@ -107,17 +107,17 @@
    -
    +
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor index 028932048..dc325f92e 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor @@ -11,11 +11,11 @@ -
    +
    -
    +
    Render different components dynamically within the modal without iterating through possible types or using conditional logic.
    If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. @@ -25,7 +25,7 @@
    -
    +
    Event callbacks (EventCallback) can be passed in its parameter dictionary.
    In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. @@ -40,12 +40,12 @@
    -
    +
    When UseStaticBackdrop is set to true, the modal will not close when clicking outside it. Click the button below to try it.
    -
    +
    When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
    @@ -53,22 +53,22 @@
    -
    +
    Add IsVerticallyCentered="true" to vertically center the modal.
    -
    +
    Modals have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
    -
    +
    -
    +
    Blazor Bootstrap modal class exposes a few events for hooking into modal functionality.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor index d54acfa9e..b9f1dc6cc 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor @@ -13,11 +13,11 @@ Similar to modals, only one offcanvas can be shown at a time. -
    +
    -
    +
    Render different components dynamically within the offcanvas without iterating through possible types or using conditional logic.
    If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. @@ -27,7 +27,7 @@
    -
    +
    Event callbacks (EventCallback) can be passed in its parameter dictionary.
    In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. @@ -42,25 +42,25 @@
    -
    +
    Try the top, bottom, and left examples out below.
    Default placement for the offcanvas component is right. -
    +
    When UseStaticBackdrop is set to true, the offcanvas will not close when clicking outside of it.
    -
    +
    Set the size of the Offcanvas with the Size parameter. The default value is OffcanvasSize.Regular.
    -
    +
    Blazor Bootstrap offcanvas component exposes a few events for hooking into offcanvas functionality.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor index 7690928eb..9f2acba7b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor @@ -11,29 +11,29 @@ -
    +
    We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links.
    -
    +
    -
    +
    -
    +
    Fancy larger or smaller pagination? Add Size="PaginationSize.Small" or Size="PaginationSize.Large" for additional sizes.
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor index e9c227cb2..3a834d82f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor @@ -11,18 +11,18 @@ -
    +
    -
    +
    Set the Orientation parameter to Orientation.Landscape to change the default orientation from Portrait to Landscape.
    -
    +
    PDF Viewer component supports base64 string as a URL.
    Url="@@string.Format("data:application/pdf;base64,{0}", pdfBase64String)" diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Placeholders/PlaceholderDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Placeholders/PlaceholderDocumentation.razor index a37377a20..e8e9b4c86 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Placeholders/PlaceholderDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Placeholders/PlaceholderDocumentation.razor @@ -11,32 +11,32 @@ -
    +
    Placeholders can be used to enhance the experience of your application.
    -
    +
    -
    +
    You can change the width through PlaceholderWidth, width utilities, or inline styles.
    -
    +
    By default, the placeholder uses currentColor. This can be overridden with the Color property of type enum.
    -
    +
    The size of placeholders are based on the typographic style of the parent element. Customize them with Size property of type enum.
    -
    +
    Animate placeholders with PlaceholderAnimation.Glow or PlaceholderAnimation.Wave to better convey the perception of something being actively loaded.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Preload/PreloadDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Preload/PreloadDocumentation.razor index 0f4f24ee0..db704309b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Preload/PreloadDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Preload/PreloadDocumentation.razor @@ -11,7 +11,7 @@ -
    +
    • Add the Preload component to your current page or your layout page.
      • @@ -22,19 +22,19 @@
    -
    +
    1. Add the Preload component in MainLayout.razor page as shown below.
    2. Inject PreloadService, then call the Show() and Hide() methods before and after the Service/API, respectively, as shown below.
    -
    +
    -
    +
    Change the default spinner color by passing the SpinnerColor enum to the Show(...) method. In the below example, we are using a global preload service, as shown in the above section. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Progress/ProgressDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Progress/ProgressDocumentation.razor index e65e0b5f7..cfdbb758c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Progress/ProgressDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Progress/ProgressDocumentation.razor @@ -11,51 +11,51 @@ -
    +
    -
    +
    Add labels to your Blazor ProgressBar component using the Label parameter or by calling the SetLabel(...) method.
    -
    +
    Use IncreaseWidth() or DecreaseWidth() methods to increase or decrease the Blazor ProgressBar width.
    -
    +
    Set the height of the Blazor Progress by using the Height parameter. Height is measured in pixels.
    -
    +
    Use the Color parameter or the SetColor(ProgressColor color) method to change the appearance of individual Blazor ProgressBar components.
    -
    +
    You can dynamically set the Blazor ProgressBar color by calling the SetColor() method.
    -
    +
    Include multiple Blazor ProgressBar components in a Blazor Progress component if needed.
    -
    +
    Add Type="ProgressType.Striped" to any Blazor ProgressBar component to apply a stripe.
    -
    +
    The stripes can also be animated. Add Type="ProgressType.StripedAndAnimated" to the Blazor ProgressBar component to animate the stripes right to the left.
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/RibbonDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/RibbonDocumentation.razor index 904943980..daded6f5a 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/RibbonDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/RibbonDocumentation.razor @@ -11,12 +11,12 @@ -
    +
    In the following example, you will see a ribbon similar to the one found in Outlook.
    -
    +
    In the following example, instead of icons like Bootstrap, Font Awesome, etc., we used PNG icons.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ScriptLoader/ScriptLoaderDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/ScriptLoader/ScriptLoaderDocumentation.razor index 12859fb89..68f5e2046 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/ScriptLoader/ScriptLoaderDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/ScriptLoader/ScriptLoaderDocumentation.razor @@ -11,7 +11,7 @@ -
    +
    In the following example, the jQuery script is loaded using the Script Loader component.
    @@ -24,7 +24,7 @@ Blazor Script Loader - Test whether the jQuery script has been loaded successfully -
    +
    Blazor Bootstrap Script Loader component exposes two events.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor index 4ab73d463..fa9cf45fb 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor @@ -13,31 +13,31 @@ -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    1. Add the Modal component in MainLayout.razor page as shown below.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor index 61f77ae14..68766d8b1 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor @@ -11,57 +11,57 @@ -
    +
    -
    +
    Use NavItem's Id and ParentId to set the parent-child relation.
    Currently, two levels of navigation are supported. For more than two levels, use the Sidebar2 component.
    -
    +
    Set IconColor property to change the color.
    -
    +
    Replace your MainLayout.razor page code with the below example to have a complete layout with a sidebar.
    -
    +
    Call ToggleSidebar() method to toggle the Sidebar to show the icons only.
    -
    +
    A badge is useful when displaying the application version, environment, or other information. Use the BadgeText parameter to show the badge.
    -
    +
    Use the CustomIconName parameter to set the custom logo icon using font awesome or other icons.
    -
    +
    Use the ImageSrc parameter to set the brand logo.
    -
    +
    Developers can customize the sidebar color by changing the CSS variables, as mentioned in the below example.
    -
    +
    Set the Class property of a NavItem to apply a custom CSS class.
    -
    +
    Set the Width parameter to change the sidebar width. Default value is 270px.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor index 62b3b2240..cd3c48aaa 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor @@ -11,37 +11,37 @@ -
    +
    -
    +
    -@*
    +@*
    Set IconColor property to change the color.
    *@ -
    +
    Replace your MainLayout.razor page code with the below example to have a complete layout with a sidebar.
    -
    +
    Use the CustomIconName parameter to set the custom logo icon using font awesome or other icons.
    -
    +
    Use the ImageSrc parameter to set the brand logo.
    -
    +
    Set the Width parameter to change the sidebar width. Default value is 270px.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor index c3a2c8528..7ae499349 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor @@ -11,17 +11,17 @@ -
    +
    Before using the SortableList component, include the SortableJS script reference in your index.html/_Host.cshtml file.
    -
    +
    -
    +

    To drag-and-drop an item from one list to the other and vice versa, set the Group parameter for all the lists. Providing the same Group name for the lists is what links them together.

    In the below example, both lists use the same Group.

    @@ -34,35 +34,35 @@
    -
    +
    By setting Pull="SortableListPullMode.Clone", you can enable item cloning. Drag an item from one list to another to create a copy that stays in the original list.
    -
    +
    You can disable list sorting by setting AllowSorting="false". In the example below, the list cannot be sorted.
    -
    +
    The Handle parameter specifies the CSS class that denotes the drag handle. In the example below, items can only be sorted by dragging the handle itself.
    -
    +
    Try dragging the red-backgrounded item. You won't be able to, as it's disabled using the DisableItem parameter.
    -
    +
    @*
    *@ @@ -70,12 +70,12 @@
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Spinners/SpinnersDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Spinners/SpinnersDocumentation.razor index 38168712a..a781a2259 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Spinners/SpinnersDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Spinners/SpinnersDocumentation.razor @@ -11,19 +11,19 @@ -
    +
    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!
    @@ -31,38 +31,38 @@
    -
    +
    The loading dots are a special indicator for a lightweight loading indicator.
    -
    -
    +
    +
    -
    -
    +
    +
    -
    +
    -
    +
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor index ab64a5894..4c708bf0f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor @@ -11,54 +11,54 @@ -
    +
    -
    +
    To create a fade-in effect for tabs, add the EnableFadeEffect="true" parameter. Additionally, set the IsActive="true" parameter on the first tab pane to display its content initially.
    -
    +
    To customize the tab title, use the TitleTemplate parameter, as demonstrated in the following example.
    -
    +
    Disable specific tabs by adding Disabled="true" parameter.
    -
    +
    To transform the tabs into pills, use the parameter NavStyle="NavStyle.Pills".
    -
    +
    Use the NavStyle="NavStyle.Underline" parameter to change the tabs to an underlined style.
    -
    +
    Display your tabs vertically by setting the NavStyle parameter to NavStyle.Vertical.
    -
    +
    -
    +
    -
    +
    You can activate individual tabs in several ways. Use predefined methods such as ShowFirstTabAsync, ShowLastTabAsync, ShowTabByIndexAsync, and ShowTabByNameAsync, as shown below.
    -
    +
    When displaying a new tab, the events fire in the following sequence:

    @@ -100,23 +100,23 @@

    -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    In the following example, we are deleting tabs dynamically. Ensure that the @@key parameter is added with unique value. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/ToastsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/ToastsDocumentation.razor index bc1fa6479..4aaf04b70 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/ToastsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/ToastsDocumentation.razor @@ -13,44 +13,44 @@
    Blazor Toasts are lightweight notifications designed to mimic the push notifications that mobile and desktop operating systems have popularized. They're built with a flexbox, making it easy to align and position.
    -
    +
    • Blazor Toasts will not hide automatically if you do not specify AutoHide="true".
    • Use global toasts service for the application instead of page level toasts.
    -
    +
    -
    +
    -
    +
    Add AutoHide="true" parameter to hide the Blazor Toasts after the delay. The default delay is 5000 milliseconds, be sure to update the delay timeout so that users have enough time to read the toast.
    -
    +
    Set AutoHide="true" property on ToastMessage to hide individual Blazor Toast message after the delay. The default delay is 5000 milliseconds, be sure to update the delay timeout so that users have enough time to read the toast.
    In the below example, AutoHide="false" for Danger and Warning messages.
    -
    +
    Change the Blazor Toasts placement according to your need. The default placement will be top right corner. Use the ToastsPlacement parameter to update the Blazor Toasts placement.
    -
    +
    Blazor Toasts component shows a maximum of 5 toasts by default. If you add a new toast to the existing list, the first toast gets deleted like FIFO (First In First Out). Change the maximum capacity according to your need by using the StackLength parameter.
    In the below example, StackLength is set to 3. It shows a maximum of 3 toast messages at any time.
    -
    +
    1. Add the Toasts component in MainLayout.razor page as shown below.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Tooltips/TooltipsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Tooltips/TooltipsDocumentation.razor index 5a8bffda6..4acb07eec 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Tooltips/TooltipsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Tooltips/TooltipsDocumentation.razor @@ -11,11 +11,11 @@ -
    +
    -
    +
    @@ -24,21 +24,21 @@ See Buttons - Tooltip. -
    +
    @* START: Commented Examples *@ -@*
    +@*
    -
    +
    *@ @* END: Commented Examples *@ -
    +
    Blazor Bootstrap includes several predefined tooltip styles, each serving its own semantic purpose. The Color parameter can be used to customize the color of the tooltip. @@ -46,11 +46,11 @@
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor index 569c6f7ab..4863b7427 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor @@ -11,13 +11,13 @@ -
    +
    -
    +