From 8e44b84b7332d1b45058ac2535445d8c07bb304c Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Mon, 4 Nov 2024 23:10:57 +0530 Subject: [PATCH] ThemeSwitcher component (#929) * ThemeSwitcher updates * RCL - Shared components updated * Route constants added --- .../Components/Layout/EmptyLayout.razor | 24 +- .../Components/Layout/MainLayout.razor | 27 +- .../Components/Layout/MainLayout.razor.cs | 9 +- .../Components/Layout/MainLayoutBase.cs | 16 - .../Pages/AI/AIChat/AIChatDocumentation.razor | 31 +- .../Accordion/AccordionDocumentation.razor | 189 ++++++------ .../Pages/Alerts/AlertDocumentation.razor | 68 +++-- .../Pages/Badge/BadgeDocumentation.razor | 103 ++++--- .../Breadcrumb/BreadcrumbDocumentation.razor | 41 +-- .../Pages/Buttons/ButtonDocumentation.razor | 188 ++++++------ .../Pages/Callout/CalloutDocumentation.razor | 46 +-- .../Pages/Card/CardDocumentation.razor | 194 ++++++------ .../Carousel/CarouselDocumentation.razor | 151 +++++----- .../BarCharts/BarChartDocumentation.razor | 38 +-- .../Pages/Charts/ChartsDocumentation.razor | 75 ++--- .../DoughnutChartDocumentation.razor | 65 ++-- .../LineCharts/LineChartDocumentation.razor | 104 ++++--- .../PieCharts/PieChartDocumentation.razor | 76 ++--- .../PolarAreaChartDocumentation.razor | 54 ++-- .../RadarCharts/RadarChartDocumentation.razor | 55 ++-- .../ScatterChartDocumentation.razor | 74 ++--- .../Collapse/CollapseDocumentation.razor | 90 +++--- .../ConfirmDialogDocumentation.razor | 129 ++++---- .../Dropdowns/DropdownDocumentation.razor | 280 +++++++++--------- .../AutoCompleteDocumentation.razor | 107 ++++--- .../CurrencyInputDocumentation.razor | 174 ++++++----- .../DateInput/DateInputDocumentation.razor | 133 +++++---- .../NumberInputDocumentation.razor | 118 ++++---- .../RangeInput/RangeInputDocumentation.razor | 118 ++++---- .../Form/Switch/SwitchDocumentation.razor | 80 ++--- .../TimeInput/TimeInputDocumentation.razor | 127 ++++---- .../GettingStartedDocumentation.razor | 72 ++--- .../Grid_Overview_Documentation.razor | 35 ++- .../Grid_DataBinding_Documentation.razor | 53 ++-- .../Grid_Filters_Documentation.razor | 106 ++++--- .../04-paging/Grid_Paging_Documentation.razor | 51 ++-- .../Grid_Sorting_Documentation.razor | 54 ++-- .../Grid_Selection_Documentation.razor | 87 +++--- .../Grid_Alignment_Documentation.razor | 35 ++- .../Grid_GridSettings_Documentation.razor | 32 +- .../Grid_CustomCSSClass_Documentation.razor | 56 ++-- .../10-events/Grid_Events_Documentation.razor | 35 ++- .../Grid_Translations_Documentation.razor | 28 +- .../Grid_FixedHeader_Documentation.razor | 39 +-- .../Grid_FreezeColumns_Documentation.razor | 38 ++- .../Grid_DetailView_Documentation.razor | 35 ++- .../Grid_Nested_Documentation.razor | 28 +- .../99-other/Grid_Other_Documentation.razor | 58 ++-- .../Pages/Icons/IconDocumentation.razor | 98 +++--- .../Pages/Images/ImageDocumentation.razor | 59 ++-- .../Components/Pages/Index.razor | 2 +- .../server/LayoutServerDocumentation.razor | 62 ++-- .../LayoutWebAssemblyDocumentation.razor | 63 ++-- .../Pages/Maps/GoogleMapDocumentation.razor | 120 ++++---- .../Markdown/MarkdownDocumentation.razor | 228 +++++++------- .../Pages/Modal/ModalDocumentation.razor | 121 ++++---- .../Offcanvas/OffcanvasDocumentation.razor | 105 ++++--- .../Pagination/PaginationDocumentation.razor | 60 ++-- .../PdfViewer/PdfViewerDocumentation.razor | 59 ++-- .../PlaceholderDocumentation.razor | 68 +++-- .../Pages/Preload/PreloadDocumentation.razor | 80 ++--- .../Progress/ProgressDocumentation.razor | 90 +++--- .../Pages/Ribbon/RibbonDocumentation.razor | 44 +-- .../ScriptLoaderDocumentation.razor | 68 +++-- .../ModalServiceDocumentation.razor | 63 ++-- .../Pages/Sidebar/SidebarDocumentation.razor | 123 ++++---- .../Sidebar2/Sidebar2Documentation.razor | 87 +++--- .../SortableListDocumentation.razor | 153 +++++----- .../Spinners/SpinnersDocumentation.razor | 107 ++++--- .../Pages/Tabs/TabsDocumentation.razor | 190 ++++++------ .../Pages/Toasts/ToastsDocumentation.razor | 108 ++++--- .../Tooltips/TooltipsDocumentation.razor | 71 +++-- .../ColorUtil/ColorUtilDocumentation.razor | 45 +-- .../Components/Shared/PageHero.razor | 7 + .../Components/Shared/PageHero.razor.cs | 10 + .../{MetaTags.razor => PageMetaTags.razor} | 3 + ...etaTags.razor.cs => PageMetaTags.razor.cs} | 46 ++- .../Components/Shared/Section.razor | 48 +++ .../Components/Shared/Section.razor.cs | 56 ++++ .../Components/Shared/SectionHeading.razor | 32 -- .../Components/Shared/SectionHeading.razor.cs | 39 --- .../Constants/RouteConstants.cs | 104 +++++++ .../Shared => }/Enums/LanguageCode.cs | 0 .../Shared => }/Extensions/EnumExtensions.cs | 0 .../wwwroot/js/blazorbootstrap.demo.rcl.js | 92 ++---- .../ThemeSwitcher/ThemeSwitcher.razor | 44 +-- .../ThemeSwitcher/ThemeSwitcher.razor.cs | 36 ++- .../ThemeSwitcher/ThemeSwitcherJsInterop.cs | 14 +- .../blazor.bootstrap.theme-switcher.js | 58 ++-- 89 files changed, 3681 insertions(+), 3008 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Components/Shared/PageHero.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Shared/PageHero.razor.cs rename BlazorBootstrap.Demo.RCL/Components/Shared/{MetaTags.razor => PageMetaTags.razor} (94%) rename BlazorBootstrap.Demo.RCL/Components/Shared/{MetaTags.razor.cs => PageMetaTags.razor.cs} (57%) create mode 100644 BlazorBootstrap.Demo.RCL/Components/Shared/Section.razor create mode 100644 BlazorBootstrap.Demo.RCL/Components/Shared/Section.razor.cs delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Shared/SectionHeading.razor delete mode 100644 BlazorBootstrap.Demo.RCL/Components/Shared/SectionHeading.razor.cs create mode 100644 BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs rename BlazorBootstrap.Demo.RCL/{Components/Shared => }/Enums/LanguageCode.cs (100%) rename BlazorBootstrap.Demo.RCL/{Components/Shared => }/Extensions/EnumExtensions.cs (100%) 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..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.Demo.RCL/Components/Layout/MainLayout.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs index d4797337d..7ceae60b7 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs @@ -17,7 +17,7 @@ internal override IEnumerable GetNavItems() new (){ Id = "301", Text = "Images", Href = "/images", IconName = IconName.Image, ParentId = "3" }, new (){ Id = "4", Text = "Forms", IconName = IconName.InputCursorText, IconColor = IconColor.Success }, - new (){ Id = "400", Text = "Auto Complete", Href = "/autocomplete", IconName = IconName.InputCursorText, ParentId = "4" }, + new (){ Id = "400", Text = "Auto Complete", Href = "/form/autocomplete", IconName = IconName.InputCursorText, ParentId = "4" }, new (){ Id = "401", Text = "Currency Input", Href = "/form/currency-input", IconName = IconName.CurrencyDollar, ParentId = "4" }, new (){ Id = "402", Text = "Date Input", Href = "/form/date-input", IconName = IconName.CalendarDate, ParentId = "4" }, new (){ Id = "403", Text = "Number Input", Href = "/form/number-input", IconName = IconName.InputCursor, ParentId = "4" }, @@ -90,7 +90,7 @@ internal override IEnumerable GetNavItems() new (){ Id = "605", Text = "Scatter Chart", Href = "/charts/scatter-chart", IconName = IconName.GraphUpArrow, ParentId = "6", Match = NavLinkMatch.All }, new(){ Id = "7", Text = "Services", IconName = IconName.WrenchAdjustableCircleFill, IconColor = IconColor.Success }, - new (){ Id = "700", Text = "Modal Service", Href = "/modal-service", IconName = IconName.WindowStack, ParentId = "7" }, + new (){ Id = "700", Text = "Modal Service", Href = "/services/modal-service", IconName = IconName.WindowStack, ParentId = "7" }, new(){ Id = "19", Text = "Utilities", IconName = IconName.GearWideConnected, IconColor = IconColor.Info }, new (){ Id = "1900", Text = "Color Utility", Href = "/utils/color-utility", IconName = IconName.Palette2, ParentId = "19" }, @@ -98,4 +98,9 @@ internal override IEnumerable 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/Components/Pages/AI/AIChat/AIChatDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChatDocumentation.razor index 559e797cd..fffd2c360 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChatDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChatDocumentation.razor @@ -1,21 +1,26 @@ -@page "/ai/open-ai-chat" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Open AI Chat

    -
    Provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.
    + + @pageDescription + - -
    Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.
    - +
    +
    Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.
    + +
    @code{ - private string pageUrl = "/ai/open-ai-chat"; - private string title = "Blazor Open AI Chat Component"; - private string description = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; // TODO: update - private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update + private const string pageUrl = RouteConstants.Demos_AI_Chat_Documentation; + private const string pageTitle = "Blazor Open AI Chat Component"; + private const string pageDescription = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; // TODO: update + private const string metaTitle = "Blazor Open AI Chat Component"; + private const string metaDescription = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; // TODO: update + private const string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/AccordionDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/AccordionDocumentation.razor index eae3166b3..2aa5f2dea 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/AccordionDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/AccordionDocumentation.razor @@ -1,111 +1,122 @@ -@page "/accordion" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Accordion

    -
    - Build vertically collapsing accordions in combination with our Collapse component. -
    + + @pageDescription + - -
    - The Accordion component uses the Collapse component internally to make it collapsible. -
    +
    +
    + The Accordion component uses the Collapse component internally to make it collapsible. +
    +
    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 accordions below to expand/collapse the accordion content. -
    - +
    +
    + Click the accordions below to expand/collapse the accordion content. +
    + +
    - -
    - To customize the accordion title, use TitleTemplate, as shown in the below example. -
    - +
    +
    + To customize the accordion title, use TitleTemplate, as shown in the below example. +
    + +
    - -
    - Set the Flush parameter to true to remove borders and rounded corners to render accordions edge-to-edge with their parent container. -
    - +
    +
    + Set the Flush parameter to true to remove borders and rounded corners to render accordions edge-to-edge with their parent container. +
    + +
    - -
    - Set the Active parameter to true to keep the accordion item open by default. -
    - +
    +
    + Set the Active parameter to true to keep the accordion item open by default. +
    + +
    - -
    - Set the AlwaysOpen parameter to true to keep accordion items open when another item is opened. -
    - +
    +
    + Set the AlwaysOpen parameter to true to keep accordion items open when another item is opened. +
    + +
    - -
    - You can show and hide individual accordion items in several ways. -
      -
    • To show an accordion item, use predefined methods ShowFirstAccordionItemAsync, ShowLastAccordionItemAsync, ShowAccordionItemByNameAsync, and ShowAccordionItemByIndexAsync.
      • -
    • To hide an accordion item, use predefined methods HideFirstAccordionItemAsync, HideLastAccordionItemAsync, HideAccordionItemByNameAsync, and HideAccordionItemByIndexAsync.
      • -
    -
    - +
    +
    + You can show and hide individual accordion items in several ways. +
      +
    • To show an accordion item, use predefined methods ShowFirstAccordionItemAsync, ShowLastAccordionItemAsync, ShowAccordionItemByNameAsync, and ShowAccordionItemByIndexAsync.
      • +
    • To hide an accordion item, use predefined methods HideFirstAccordionItemAsync, HideLastAccordionItemAsync, HideAccordionItemByNameAsync, and HideAccordionItemByIndexAsync.
      • +
    +
    + +
    - -
    - When the AlwaysOpen parameter is set to true, you can show all accordion items simultaneously using the ShowAllAccordionItemsAsync method. +
    +
    + When the AlwaysOpen parameter is set to true, you can show all accordion items simultaneously using the ShowAllAccordionItemsAsync method. The HideAllAccordionItemsAsync method will hide all accordion items, regardless of the value of AlwaysOpen. -
    - +
    + + - -
    - Blazor Bootstrap Accordion component exposes a few events for hooking into accordion functionality. - - - - - - - - - - - - - - - - - - - - - - - - - -
    Event NameDescription
    OnHidingThis event is fired immediately when the hide method has been called.
    OnHiddenThis event is fired when a accordion item has been hidden from the user (will wait for CSS transitions to complete).
    OnShowingThis event fires immediately when the show method is called.
    OnShownThis event is fired when a accordion item has been made visible to the user (will wait for CSS transitions to complete).
    - - If no accordion item is active, then the OnHiding and OnHidden events will not be fired. - -
    - +
    +
    + Blazor Bootstrap Accordion component exposes a few events for hooking into accordion functionality. + + + + + + + + + + + + + + + + + + + + + + + + + +
    Event NameDescription
    OnHidingThis event is fired immediately when the hide method has been called.
    OnHiddenThis event is fired when a accordion item has been hidden from the user (will wait for CSS transitions to complete).
    OnShowingThis event fires immediately when the show method is called.
    OnShownThis event is fired when a accordion item has been made visible to the user (will wait for CSS transitions to complete).
    + + If no accordion item is active, then the OnHiding and OnHidden events will not be fired. + +
    + +
    @code { - private string pageUrl = "/accordion"; - private string title = "Blazor Accordion Component"; - private string description = "Build vertically collapsing accordions in combination with our Collapse component."; - private string imageUrl = "https://i.imgur.com/g4zpMXp.png"; + private const string pageUrl = RouteConstants.Demos_Accordion_Documentation; + private const string pageTitle = "Blazor Accordion"; + private const string pageDescription = "Build vertically collapsing accordions in combination with our Collapse component."; + private const string metaTitle = "Blazor Accordion Component"; + private const string metaDescription = "Build vertically collapsing accordions in combination with our Collapse component."; + private const string imageUrl = "https://i.imgur.com/g4zpMXp.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/AlertDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/AlertDocumentation.razor index b4e3cb65b..d49284a36 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/AlertDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/AlertDocumentation.razor @@ -1,48 +1,58 @@ -@page "/alerts" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Alerts

    -
    Provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.
    + + @pageDescription + - -
    Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.
    - +
    +
    Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.
    + +
    - -
    Use the alert-link css class to quickly provide matching colored links within any alert.
    - +
    +
    Use the alert-link css class to quickly provide matching colored links within any alert.
    + +
    - -
    Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
    - +
    +
    Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
    + +
    - -
    Similarly, you can use Bootstrap Icons to create alerts with icons.
    - +
    +
    Similarly, you can use Bootstrap Icons to create alerts with icons.
    + +
    - -
    1. Using the Dismissable="true", it’s possible to dismiss any alert inline.
    - +
    +
    1. Using the Dismissable="true", it’s possible to dismiss any alert inline.
    + -
    2. Manually we can close an alert with button click.
    - +
    2. Manually we can close an alert with button click.
    + +
    When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document. For this reason, we recommend subscribing to the OnClosed callback event and programmatically sets focus to the most appropriate location on the page. - - +
    + +
    @code{ - private string pageUrl = "/alerts"; - private string title = "Blazor Alert Component"; - private string description = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; - private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; + private const string pageUrl = RouteConstants.Demos_Alerts_Documentation; + private const string pageTitle = "Blazor Alert"; + private const string pageDescription = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; + private const string metaTitle = "Blazor Alert Component"; + private const string metaDescription = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; + private const string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Badge/BadgeDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Badge/BadgeDocumentation.razor index 36b957c54..1ac1ad314 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Badge/BadgeDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Badge/BadgeDocumentation.razor @@ -1,61 +1,70 @@ -@page "/badge" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Badge

    -
    - The Blazor Bootstrap Badge component shows the small count and labels. -
    + + @pageDescription + - -
    - Badges scale to match the size of the immediate parent element by using relative font sizing and em units. - As of now, badges no longer have focus or hover styles for links. -
    - +
    +
    + Badges scale to match the size of the immediate parent element by using relative font sizing and em units. + As of now, badges no longer have focus or hover styles for links. +
    + +
    + +
    + +
    - - Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g., the visible text) or is included through alternative means, such as additional text hidden with the VisuallyHiddenText parameter. - -
    - Use the IndicatorType parameter to make badges more rounded with a larger border-radius. -
    - - - -
    - Badges can be used as part of links or buttons to provide a counter. -
    - -
    -

    Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.

    -

    Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.

    -
    - - -
    - Use Position and Placement parameters to position it in the corner of a link or button. -
    - - - -
    - You can also replace the badge with a generic indicator without the count. -
    - +
    +
    + Use the IndicatorType parameter to make badges more rounded with a larger border-radius. +
    + +
    + +
    +
    + Badges can be used as part of links or buttons to provide a counter. +
    + +
    +

    Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.

    +

    Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.

    +
    +
    + +
    +
    + Use Position and Placement parameters to position it in the corner of a link or button. +
    + +
    + +
    +
    + You can also replace the badge with a generic indicator without the count. +
    + +
    @code { - private string pageUrl = "/badge"; - private string title = "Blazor Badge Component"; - private string description = "The Blazor Bootstrap Badge component shows the small count and labels."; - private string imageUrl = "https://i.imgur.com/ux0sTs9.png"; + private const string pageUrl = RouteConstants.Demos_Badge_Documentation; + private const string pageTitle = "Blazor Badge"; + private const string pageDescription = "The Blazor Bootstrap Badge component shows the small count and labels."; + private const string metaTitle = "Blazor Badge Component"; + private const string metaDescription = "The Blazor Bootstrap Badge component shows the small count and labels."; + private const string imageUrl = "https://i.imgur.com/ux0sTs9.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Breadcrumb/BreadcrumbDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Breadcrumb/BreadcrumbDocumentation.razor index 4c07d3e26..2afe81ab4 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Breadcrumb/BreadcrumbDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Breadcrumb/BreadcrumbDocumentation.razor @@ -1,28 +1,33 @@ -@page "/breadcrumb" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Breadcrumb

    -
    - Indicate the current page's location within a navigational hierarchy that automatically adds separators. -
    + + @pageDescription + - - +
    + +
    - - +
    + +
    - - +
    + +
    @code { - private string pageUrl = "/breadcrumb"; - private string title = "Blazor Breadcrumb Component"; - private string description = "Indicate the current page's location within a navigational hierarchy that automatically adds separators."; - private string imageUrl = "https://i.imgur.com/hO90HoC.jpg"; + private const string pageUrl = RouteConstants.Demos_Breadcrumb_Documentation; + private const string pageTitle = "Blazor Breadcrumb"; + private const string pageDescription = "Indicate the current page's location within a navigational hierarchy that automatically adds separators."; + private const string metaTitle = "Blazor Breadcrumb Component"; + private const string metaDescription = "Indicate the current page's location within a navigational hierarchy that automatically adds separators."; + private const string imageUrl = "https://i.imgur.com/hO90HoC.jpg"; } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor index a64ee925a..0ac15eb22 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor @@ -1,94 +1,110 @@ -@page "/buttons" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Buttons

    -
    - Use Blazor Bootstrap button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. -
    + + @pageDescription + - -
    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 string pageUrl = "/buttons"; - private string title = "Blazor Button Component"; - private string description = "Use Blazor Bootstrap button styles for actions in forms, dialogs, and more with support for multiple sizes, states, etc."; - private string imageUrl = "https://i.imgur.com/Ne7FJ5H.jpg"; + private const string pageUrl = RouteConstants.Demos_Buttons_Documentation; + private const string pageTitle = "Blazor Button"; + private const string pageDescription = "Use Blazor Bootstrap button styles for actions in forms, dialogs, and more with support for multiple sizes, states, etc."; + private const string metaTitle = "Blazor Button Component"; + private const string metaDescription = "Use Blazor Bootstrap button styles for actions in forms, dialogs, and more with support for multiple sizes, states, etc."; + private const string imageUrl = "https://i.imgur.com/Ne7FJ5H.jpg"; } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor index 56694fec9..61564e389 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor @@ -1,31 +1,37 @@ -@page "/callout" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Callout

    -
    - Blazor Bootstrap callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content. -
    + + @pageDescription + - - +
    + +
    - - +
    + +
    - - +
    + +
    - - +
    + +
    @code { - private string pageUrl = "/callout"; - private string title = "Blazor Callout Component"; - private string description = "Blazor Bootstrap callout component provides content presentation in a visually distinct manner."; - private string imageUrl = "https://i.imgur.com/y2jI9ix.png"; + private const string pageUrl = RouteConstants.Demos_Callout_Documentation; + private const string pageTitle = "Blazor Callout"; + private const string pageDescription = "Blazor Bootstrap callout component provides content presentation in a visually distinct manner."; + private const string metaTitle = "Blazor Callout Component"; + private const string metaDescription = "Blazor Bootstrap callout component provides content presentation in a visually distinct manner."; + private const string imageUrl = "https://i.imgur.com/y2jI9ix.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor index 8e219ac78..1537aeabf 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor @@ -1,97 +1,113 @@ -@page "/card" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Card

    -
    - BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options. -
    + + @pageDescription + - -
    - 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 string pageUrl = "/card"; - private string title = "Blazor Card Component"; - private string description = "BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options."; - private string imageUrl = "https://i.imgur.com/RhytwPa.png"; + private const string pageUrl = RouteConstants.Demos_Card_Documentation; + private const string pageTitle = "Blazor Card"; + private const string pageDescription = "BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options."; + private const string metaTitle = "Blazor Card Component"; + private const string metaDescription = "BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options."; + private const string imageUrl = "https://i.imgur.com/RhytwPa.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor index 68900b6be..ec55ccdce 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor @@ -1,81 +1,91 @@ -@page "/carousel" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Carousel

    -
    Blazor Carousel component is a slideshow component that cycles through elements, images, or slides of text.
    + + @pageDescription + - -
    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. +
    + - - + + @@ -84,18 +94,21 @@ - -
    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. @code { - private string pageUrl = "/carousel"; - private string title = "Blazor Carousel Component"; - private string description = "Blazor Carousel component is a slideshow component that cycles through elements, images, or slides of text."; - private string imageUrl = "https://i.imgur.com/YoZd9Hy.png"; + private const string pageUrl = RouteConstants.Demos_Carousel_Documentation; + private const string pageTitle = "Blazor Carousel"; + private const string pageDescription = "Blazor Carousel component is a slideshow component that cycles through elements, images, or slides of text."; + private const string metaTitle = "Blazor Carousel Component"; + private const string metaDescription = "Blazor Carousel component is a slideshow component that cycles through elements, images, or slides of text."; + private const string imageUrl = "https://i.imgur.com/YoZd9Hy.png"; } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor index fc7545311..45adfccd6 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor @@ -1,22 +1,22 @@ -@page "/charts/bar-chart" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Bar Chart

    -
    - A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side. -
    + + @pageDescription + - +
    Refer to the getting started guide for setting up charts.
    - +
    In the following example, a categorical 12-color palette is used.
    @@ -26,25 +26,27 @@ - +
    - +
    - +
    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 string pageUrl = "/charts/bar-chart"; - private string title = "Blazor Bar Chart"; - private string description = "A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side."; - private string imageUrl = "https://i.imgur.com/IX3bajc.png"; + private const string pageUrl = RouteConstants.Demos_BarChart_Documentation; + private const string pageTitle = "Blazor Bar Chart"; + private const string pageDescription = "A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side."; + private const string metaTitle = "Blazor Bar Chart Component"; + private const string metaDescription = "A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side."; + private const string imageUrl = "https://i.imgur.com/IX3bajc.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor index 72500efca..211eb96f0 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor @@ -1,43 +1,48 @@ -@page "/charts" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Charts

    -
    - Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly. -
    + + @pageDescription + - - - - -
    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 string pageUrl = "/charts"; - private string title = "Blazor Charts"; - private string description = "Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly."; - private string imageUrl = "https://i.imgur.com/IX3bajc.png"; + private const string pageUrl = RouteConstants.Demos_Charts_Documentation; + private const string pageTitle = "Blazor Charts"; + private const string pageDescription = "Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly."; + private const string metaTitle = "Blazor Chart Components"; + private const string metaDescription = "Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly."; + private const string imageUrl = "https://i.imgur.com/IX3bajc.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor index 9ad629541..9b8b9897d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor @@ -1,39 +1,42 @@ -@page "/charts/doughnut-chart" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Doughnut Chart

    -
    - A Blazor Bootstrap donut chart component is a circular chart that shows the proportional values of different categories. - It is similar to a pie chart, but the center of the donut chart is hollow. - This makes it easier to see the individual values of each category. -
    + + @pageDescription + - -
    - 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. - - - - - +
    +
    + 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. + + +
    + +
    + +
    @code { - private string pageUrl = "/charts/doughnut-chart"; - private string title = "Blazor Doughnut Charts"; - private string description = "A Blazor donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category."; - private string imageUrl = "https://i.imgur.com/xEPhAsW.png"; + private const string pageUrl = RouteConstants.Demos_DoughnutChart_Documentation; + private const string pageTitle = "Blazor Doughnut Chart"; + private const string pageDescription = "A Blazor donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category."; + private const string metaTitle = "Blazor Doughnut Chart Component"; + private const string metaDescription = "A Blazor donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category."; + private const string imageUrl = "https://i.imgur.com/xEPhAsW.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor index 42c108642..441b7f087 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor @@ -1,56 +1,64 @@ -@page "/charts/line-chart" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Line Chart

    -
    - A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. - It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value. -
    + + @pageDescription + - -
    - 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 readonly string pageUrl = "/charts/line-chart"; - private readonly string title = "Blazor Line Chart"; - private readonly string description = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value."; - private readonly string imageUrl = "https://i.imgur.com/8b7jH0D.png"; + private const string pageUrl = RouteConstants.Demos_LineChart_Documentation; + private const string pageTitle = "Blazor Line Chart"; + private const string pageDescription = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value."; + private const string metaTitle = "Blazor Line Chart Component"; + private const string metaDescription = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value."; + private const string imageUrl = "https://i.imgur.com/8b7jH0D.png"; } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor index 48d98f22b..3434be298 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor @@ -1,43 +1,49 @@ -@page "/charts/pie-chart" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Pie Chart

    -
    - A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories. -
    + + @pageDescription + - -
    - 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 string pageUrl = "/charts/pie-chart"; - private string title = "Blazor Pie Chart"; - private string description = "A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories."; - private string imageUrl = "https://i.imgur.com/ieBupT2.png"; + private const string pageUrl = RouteConstants.Demos_PieChart_Documentation; + private const string pageTitle = "Blazor Pie Chart"; + private const string pageDescription = "A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories."; + private const string metaTitle = "Blazor Pie Chart"; + private const string metaDescription = "A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories."; + private const string imageUrl = "https://i.imgur.com/ieBupT2.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor index dd35946f6..99f094b0c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor @@ -1,34 +1,38 @@ -@page "/charts/polar-area-chart" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Polar Area Chart

    -
    - A Blazor Bootstrap polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value. -
    + + @pageDescription + - -
    - 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 string pageUrl = "/charts/polar-area-chart"; - private string title = "Blazor Polar Area Chart"; - private string description = "A Blazor Bootstrap polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value."; - private string imageUrl = "https://i.imgur.com/xLAqwGi.png"; + private const string pageUrl = RouteConstants.Demos_PolarAreaChart_Documentation; + private const string pageTitle = "Blazor Polar Area Chart"; + private const string pageDescription = "A Blazor Bootstrap polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value."; + private const string metaTitle = "Blazor Polar Area Chart Component"; + private const string metaDescription = "A Blazor Bootstrap polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value."; + private const string imageUrl = "https://i.imgur.com/xLAqwGi.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor index 9b0913fb6..fd7c9fc7f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor @@ -1,35 +1,38 @@ -@page "/charts/radar-chart" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Radar Chart

    -
    - A Blazor Bootstrap radar chart component is a way of showing multiple data points and the variation between them. - They are often useful for comparing the points of two or more different data sets. -
    + + @pageDescription + - -
    - 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 readonly string pageUrl = "/charts/radar-chart"; - private readonly string title = "Blazor Radar Chart"; - private readonly string description = "A Blazor Bootstrap radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets."; - private readonly string imageUrl = "https://i.imgur.com/Urrb79M.png"; + private const string pageUrl = RouteConstants.Demos_RadarChart_Documentation; + private const string pageTitle = "Blazor Radar Chart"; + private const string pageDescription = "A Blazor Bootstrap radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets."; + private const string metaTitle = "Blazor Radar Chart Component"; + private const string metaDescription = "A Blazor Bootstrap radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets."; + private const string imageUrl = "https://i.imgur.com/Urrb79M.png"; } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor index 84558339f..5dd3dbe73 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor @@ -1,43 +1,47 @@ -@page "/charts/scatter-chart" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Scatter Chart

    -
    - A Blazor Bootstrap scatter chart components are based on basic line charts with the x-axis changed to a linear axis. - To use a scatter chart, data must be passed as objects containing X and Y properties. -
    + + @pageDescription + - -
    - 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, 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. -
    - +
    +
    + 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, 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 readonly string pageUrl = "/charts/scatter-chart"; - private readonly string title = "Blazor Scatter Chart"; - private readonly string description = "A Blazor Bootstrap scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties."; - private readonly string imageUrl = "https://i.imgur.com/GEox0tS.png"; + private const string pageUrl = RouteConstants.Demos_ScatterChart_Documentation; + private const string pageTitle = "Blazor Scatter Chart"; + private const string pageDescription = "A Blazor Bootstrap scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties."; + private const string metaTitle = "Blazor Scatter Chart Component"; + private const string metaDescription = "A Blazor Bootstrap scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties."; + private const string imageUrl = "https://i.imgur.com/GEox0tS.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor index 461210bb5..f1aaa1d56 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor @@ -1,50 +1,53 @@ -@page "/collapse" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Collapse

    -
    - Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component. -
    + + @pageDescription + - -
    - 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,14 +64,17 @@ - -
    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 string pageUrl = "/collapse"; - private string title = "Blazor Collapse Component"; - private string description = "Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component."; - private string imageUrl = "https://i.imgur.com/8A0emQe.png"; + private const string pageUrl = RouteConstants.Demos_Collapse_Documentation; + private const string pageTitle = "Blazor Collapse"; + private const string pageDescription = "Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component."; + private const string metaTitle = "Blazor Collapse Component"; + private const string metaDescription = "Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component."; + private const string imageUrl = "https://i.imgur.com/8A0emQe.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor index d3671d7cc..6b967413c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor @@ -1,74 +1,83 @@ -@page "/confirm-dialog" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Confirm Dialog

    -
    - Use Blazor Bootstrap confirm dialog component if you want the user to verify or accept something. -
    + + @pageDescription + - -
    - +
    +
    + +
    - -
    - 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 string pageUrl = "/confirm-dialog"; - private string title = "Blazor Confirm Dialog Component"; - private string description = "Use Blazor Bootstrap confirm dialog component if you want the user to verify or accept something."; - private string imageUrl = "https://i.imgur.com/chdLk3D.jpg"; + private const string pageUrl = RouteConstants.Demos_ConfirmDialog_Documentation; + private const string pageTitle = "Blazor Confirm Dialog"; + private const string pageDescription = "Use Blazor Bootstrap confirm dialog component if you want the user to verify or accept something."; + private const string metaTitle = "Blazor Confirm Dialog Component"; + private const string metaDescription = "Use Blazor Bootstrap confirm dialog component if you want the user to verify or accept something."; + private const string imageUrl = "https://i.imgur.com/chdLk3D.jpg"; } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor index 293fd34dc..af7d67f04 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor @@ -1,124 +1,134 @@ -@page "/dropdown" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Dropdown

    -
    - Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They are toggled by clicking, not by hovering; this is an intentional design decision'by bootstrap. -
    + + @pageDescription + - - - - - - - - - - - - - - - - -
    - 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,14 +179,17 @@ - -
    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 string pageUrl = "/dropdown"; - private string title = "Blazor Dropdown Component"; - private string description = "Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They are toggled by clicking, not by hovering; this is an intentional design decision'by bootstrap."; - private string imageUrl = "https://i.imgur.com/beAr31J.png"; + private const string pageUrl = RouteConstants.Demos_Dropdown_Documentation; + private const string pageTitle = "Blazor Dropdown"; + private const string pageDescription = "Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They are toggled by clicking, not by hovering; this is an intentional design decision'by bootstrap."; + private const string metaTitle = "Blazor Dropdown Component"; + private const string metaDescription = "Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They are toggled by clicking, not by hovering; this is an intentional design decision'by bootstrap."; + private const string imageUrl = "https://i.imgur.com/beAr31J.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor index 40eb7b515..4c0f008b9 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor @@ -1,50 +1,56 @@ @page "/autocomplete" -@page "/form/autocomplete" -@title +@attribute [Route(pageUrl)] - + -

    Blazor Auto Complete

    -
    - Blazor Bootstrap autocomplete component is a textbox that offers the users suggestions as they type from the data source. And it supports client-side and server-side filtering. -
    + + @pageDescription + - - +
    + +
    - -
    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. +
    +
    +
    +
    + - - + + @@ -69,26 +75,31 @@ - -
    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 string pageUrl = "/autocomplete"; - private string title = "Blazor AutoComplete Component"; - private string description = "Blazor Bootstrap autocomplete component is a textbox that offers the users suggestions as they type from the data source. And it supports client-side and server-side filtering."; - private string imageUrl = "https://i.imgur.com/36RsWZ3.png"; + private const string pageUrl = RouteConstants.Demos_AutoComplete_Documentation; + private const string pageTitle = "Blazor AutoComplete"; + private const string pageDescription = "Blazor Bootstrap autocomplete component is a textbox that offers the users suggestions as they type from the data source. And it supports client-side and server-side filtering."; + private const string metaTitle = "Blazor AutoComplete Component"; + private const string metaDescription = "Blazor Bootstrap autocomplete component is a textbox that offers the users suggestions as they type from the data source. And it supports client-side and server-side filtering."; + private const string imageUrl = "https://i.imgur.com/36RsWZ3.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor index ec53dcc37..f4a2088a2 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInputDocumentation.razor @@ -1,89 +1,105 @@ @page "/currency-input" -@page "/form/currency-input" -@title +@attribute [Route(pageUrl)] - + -

    Blazor Currency Input

    -
    - Use the Blazor Bootstrap CurrencyInput component to show the numbers in the user's locale format, including the currency symbol. -
    + + @pageDescription + - -
    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 string pageUrl = "/form/currency-input"; - private string title = "Blazor CurrencyInput Component"; - private string description = "Use the Blazor Bootstrap CurrencyInput component to show the numbers in the user's locale format, including the currency symbol."; - private string imageUrl = "https://i.imgur.com/iUNBkki.png"; + private const string pageUrl = RouteConstants.Demos_CurrencyInput_Documentation; + private const string pageTitle = "Blazor CurrencyInput"; + private const string pageDescription = "Use the Blazor Bootstrap CurrencyInput component to show the numbers in the user's locale format, including the currency symbol."; + private const string metaTitle = "Blazor CurrencyInput Component"; + private const string metaDescription = "Use the Blazor Bootstrap CurrencyInput component to show the numbers in the user's locale format, including the currency symbol."; + private const string imageUrl = "https://i.imgur.com/iUNBkki.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor index 02d1219f0..0e77f37d2 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor @@ -1,79 +1,88 @@ @page "/date-input" -@page "/form/date-input" -@title +@attribute [Route(pageUrl)] - + -

    Blazor Date Input

    -
    - The Blazor Bootstrap DateInput component is constructed using an HTML input of type="date" which limits user input based on pre-defined parameters. - This component enables users to input a date using a text box with validation or a special date picker interface. -
    + + @pageDescription + - - - 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 string pageUrl = "/form/date-input"; - private string title = "Blazor DateInput Component"; - private string description = "The Blazor Bootstrap DateInput component is constructed using an HTML input of type 'date' which limits user input based on pre-defined parameters. This component enables users to input a date using a text box with validation or a special date picker interface."; - private string imageUrl = "https://i.imgur.com/1mVjqQv.png"; + private const string pageUrl = RouteConstants.Demos_DateInput_Documentation; + private const string pageTitle = "Blazor DateInput"; + private const string pageDescription = "The Blazor Bootstrap DateInput component is constructed using an HTML input of type 'date' which limits user input based on pre-defined parameters. This component enables users to input a date using a text box with validation or a special date picker interface."; + private const string metaTitle = "Blazor DateInput Component"; + private const string metaDescription = "The Blazor Bootstrap DateInput component is constructed using an HTML input of type 'date' which limits user input based on pre-defined parameters. This component enables users to input a date using a text box with validation or a special date picker interface."; + private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInputDocumentation.razor index 7ed206b6c..819c761fc 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInputDocumentation.razor @@ -1,71 +1,83 @@ @page "/number-input" -@page "/form/number-input" -@title +@attribute [Route(pageUrl)] - + -

    Blazor Number Input

    -
    - Blazor Bootstrap NumberInput component is built around HTML input of type="number" that prevents the user input based on the parameters set. -
    + + @pageDescription + - -
    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 string pageUrl = "/form/number-input"; - private string title = "Blazor NumberInput Component"; - private string description = "Blazor Bootstrap NumberInput component is built around HTML input of type=\"number\" that prevents the user input based on the parameters set."; - private string imageUrl = "https://i.imgur.com/iUNBkki.png"; + private const string pageUrl = RouteConstants.Demos_NumberInput_Documentation; + private const string pageTitle = "Blazor NumberInput"; + private const string pageDescription = "Blazor Bootstrap NumberInput component is built around HTML input of type=\"number\" that prevents the user input based on the parameters set."; + private const string metaTitle = "Blazor NumberInput Component"; + private const string metaDescription = "Blazor Bootstrap NumberInput component is built around HTML input of type=\"number\" that prevents the user input based on the parameters set."; + private const string imageUrl = "https://i.imgur.com/iUNBkki.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor index 26f59729f..2aea480b1 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor @@ -1,63 +1,73 @@ @page "/range-input" -@page "/form/range-input" -@title +@attribute [Route(pageUrl)] - + -

    Blazor Range Input

    -
    - Blazor Bootstrap RangeInput component is built around HTML input of type="range". -
    + + @pageDescription + - -
    - - - - -
    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. -

    -     - - - -
    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. -
    - +
    +
    + + +
    + +
    +
    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. +

    +     + +
    + +
    +
    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. +
    + +
    + @code { - private string pageUrl = "/form/range-input"; - private string title = "Blazor RangeInput Component"; - private string description = "Blazor Bootstrap RangeInput component is built around HTML input of type=\"range\"."; - private string imageUrl = "https://i.imgur.com/rWDDHaf.png"; + private const string pageUrl = RouteConstants.Demos_RangeInput_Documentation; + private const string pageTitle = "Blazor RangeInput"; + private const string pageDescription = "Blazor Bootstrap RangeInput component is built around HTML input of type=\"range\"."; + private const string metaTitle = "Blazor RangeInput Component"; + private const string metaDescription = "Blazor Bootstrap RangeInput component is built around HTML input of type=\"range\"."; + private const string imageUrl = "https://i.imgur.com/rWDDHaf.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor index 8441e4110..13b7966c8 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor @@ -1,47 +1,55 @@ @page "/switch" -@page "/form/switch" -@title +@attribute [Route(pageUrl)] - + -

    Blazor Switch

    -
    - Use the Blazor Bootstrap Switch component to show the consistent cross-browser and cross-device custom checkboxes. -
    + + @pageDescription + - +
    - - -
    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 string pageUrl = "/form/switch"; - private string title = "Blazor Switch Component"; - private string description = "Create consistent cross-browser and cross-device checkboxes with our blazor switches. A switch has the markup of a custom checkbox."; - private string imageUrl = "https://i.imgur.com/ALKzreq.png"; + private const string pageUrl = RouteConstants.Demos_Switch_Documentation; + private const string pageTitle = "Blazor Switch"; + private const string pageDescription = "Create consistent cross-browser and cross-device checkboxes with our blazor switches. A switch has the markup of a custom checkbox."; + private const string metaTitle = "Blazor Switch Component"; + private const string metaDescription = "Create consistent cross-browser and cross-device checkboxes with our blazor switches. A switch has the markup of a custom checkbox."; + private const string imageUrl = "https://i.imgur.com/ALKzreq.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor index 238d683eb..c05d9da9d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor @@ -1,76 +1,85 @@ @page "/time-input" -@page "/form/time-input" -@title +@attribute [Route(pageUrl)] - + -

    Blazor Time Input

    -
    - The Blazor Bootstrap TimeInput component is constructed using an HTML input of type="time" which limits user input based on pre-defined parameters. - This component enables users to input a time using a text box with validation or a special time picker interface. -
    + + @pageDescription + - - - 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 string pageUrl = "/form/time-input"; - private string title = "Blazor TimeInput Component"; - private string description = "The Blazor Bootstrap TimeInput component is constructed using an HTML input of type 'time' which limits user input based on pre-defined parameters. This component enables users to input a time using a text box with validation or a special time picker interface."; - private string imageUrl = "https://i.imgur.com/1mVjqQv.png"; + private const string pageUrl = RouteConstants.Demos_TimeInput_Documentation; + private const string pageTitle = "Blazor TimeInput"; + private const string pageDescription = "The Blazor Bootstrap TimeInput component is constructed using an HTML input of type 'time' which limits user input based on pre-defined parameters. This component enables users to input a time using a text box with validation or a special time picker interface."; + private const string metaTitle = "Blazor TimeInput Component"; + private const string metaDescription = "The Blazor Bootstrap TimeInput component is constructed using an HTML input of type 'time' which limits user input based on pre-defined parameters. This component enables users to input a time using a text box with validation or a special time picker interface."; + private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/GettingStarted/GettingStartedDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/GettingStarted/GettingStartedDocumentation.razor index b401c91b9..839fbd92d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/GettingStarted/GettingStartedDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/GettingStarted/GettingStartedDocumentation.razor @@ -1,31 +1,34 @@ -@page "/getting-started" -@page "/getting-started/blazor-webassembly" +@page "/getting-started/blazor-webassembly" @page "/getting-started/blazor-server" @page "/getting-started/maui-blazor" -@title +@attribute [Route(pageUrl)] - + -

    Getting started - Blazor Bootstrap

    -
    Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks.
    + + @pageDescription + - -
    - 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: +
    - - +
    + - - + + @@ -46,19 +49,19 @@ - -
    # .NET Version Documentation Link
    1 .NET 8.NET 8 MAUI Blazor Hybrid App (.NET 8)
    + + - - +
    + - - + + @@ -74,20 +77,19 @@ - -
    # .NET Version Documentation Link
    1 .NET 7.NET 7 MAUI Blazor Hybrid App (.NET 7)
    + + - - - +
    + - - + + @@ -98,15 +100,17 @@ - -
    # .NET Version Documentation Link
    1 .NET 6.NET 6 Blazor Server (.NET 6)
    - + + +
    @code { - private string pageUrl = "/getting-started/blazor-webassembly"; - private string title = "Getting started with Blazor Bootstrap - Blazor WebAssembly Project Setup"; - private string description = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers."; - private string imageUrl = "https://i.imgur.com/SCbZVd4.jpg"; + private const string pageUrl = RouteConstants.Demos_GettingStarted_Documentation; + private const string pageTitle = "Getting started with Blazor Bootstrap - Blazor Project Setup"; + private const string pageDescription = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers."; + private const string metaTitle = "Getting started with Blazor Bootstrap - Blazor Project Setup"; + private const string metaDescription = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers."; + private const string imageUrl = "https://i.imgur.com/SCbZVd4.jpg"; private string? version; [Inject] public IConfiguration Configuration { get; set; } = default!; 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 0a832a33d..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 @@ -1,26 +1,31 @@ -@attribute [Route(pageUrl)] -@attribute [Route(pageUrl2)] +@page "/grid" -@title +@attribute [Route(pageUrl)] - + -

    @heading

    -
    @description
    + + @pageDescription + - - +
    + +
    - - +
    + +
    @code { - private const string pageUrl = "/grid/overview"; - private const string pageUrl2 = "/grid"; - private const string title = "Blazor Grid Component"; - private const string heading = "Blazor Grid"; - private const string description = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string pageUrl = RouteConstants.Demos_Grid_Overview_Documentation; + private const string pageTitle = "Blazor Grid"; + private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string metaTitle = "Blazor Grid Component"; + private const string metaDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; private const string imageUrl = "https://i.imgur.com/kKNgo2I.png"; } 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 a13fba2a3..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 @@ -1,35 +1,40 @@ @attribute [Route(pageUrl)] -@title + - - -

    @heading

    -
    @description
    + + @pageDescription + - -
    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 = "/grid/data-binding"; - private const string title = "Blazor Grid Component - Data binding"; - private const string heading = "Blazor Grid - Data binding"; - private const string description = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string pageUrl = RouteConstants.Demos_Grid_DataBinding_Documentation; + private const string pageTitle = "Blazor Grid - Data binding"; + private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string metaTitle = "Blazor Grid Component - Data binding"; + private const string metaDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; private const string imageUrl = "https://i.imgur.com/kKNgo2I.png"; } 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 855ba0448..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 @@ -1,65 +1,75 @@ @attribute [Route(pageUrl)] -@title + - - -

    @heading

    -
    @description
    + + @pageDescription + - -
    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 = "/grid/filters"; - private const string title = "Blazor Grid Component - Filters"; - private const string heading = "Blazor Grid - Filters"; - private const string description = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string pageUrl = RouteConstants.Demos_Grid_Filters_Documentation; + private const string pageTitle = "Blazor Grid - Filters"; + private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string metaTitle = "Blazor Grid Component - Filters"; + private const string metaDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; private const string imageUrl = "https://i.imgur.com/kKNgo2I.png"; } 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 4422b0631..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 @@ -1,35 +1,42 @@ @attribute [Route(pageUrl)] -@title + - - -

    @heading

    -
    @description
    + + @pageDescription + - -
    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 = "/grid/paging"; - private const string title = "Blazor Grid Component - Paging"; - private const string heading = "Blazor Grid - Paging"; - private const string description = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string pageUrl = RouteConstants.Demos_Grid_Paging_Documentation; + private const string pageTitle = "Blazor Grid - Paging"; + private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string metaTitle = "Blazor Grid Component - Paging"; + private const string metaDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; private const string imageUrl = "https://i.imgur.com/kKNgo2I.png"; } 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 0c204c2d0..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 @@ -1,34 +1,40 @@ @attribute [Route(pageUrl)] -@title + - - -

    @heading

    -
    @description
    + + @pageDescription + - -
    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.
    - - - -
    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.
    - +
    +
    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.
    + +
    + +
    +
    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 = "/grid/sorting"; - private const string title = "Blazor Grid Component - Sorting"; - private const string heading = "Blazor Grid - Sorting"; - private const string description = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string pageUrl = RouteConstants.Demos_Grid_Sorting_Documentation; + private const string pageTitle = "Blazor Grid - Sorting"; + private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string metaTitle = "Blazor Grid Component - Sorting"; + private const string metaDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; private const string imageUrl = "https://i.imgur.com/kKNgo2I.png"; } 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 636670bf2..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 @@ -1,50 +1,57 @@ @attribute [Route(pageUrl)] -@title + - - -

    @heading

    -
    @description
    + + @pageDescription + - -
    - 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 = "/grid/selection"; - private const string title = "Blazor Grid Component - Selection"; - private const string heading = "Blazor Grid - Selection"; - private const string description = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string pageUrl = RouteConstants.Demos_Grid_Selection_Documentation; + private const string pageTitle = "Blazor Grid - Selection"; + private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string metaTitle = "Blazor Grid Component - Selection"; + private const string metaDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; private const string imageUrl = "https://i.imgur.com/kKNgo2I.png"; } 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 97af142f5..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 @@ -1,26 +1,31 @@ @attribute [Route(pageUrl)] -@title + - - -

    @heading

    -
    @description
    + + @pageDescription + - -
    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 = "/grid/alignment"; - private const string title = "Blazor Grid Component - Alignment"; - private const string heading = "Blazor Grid - Alignment"; - private const string description = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string pageUrl = RouteConstants.Demos_Grid_Alignment_Documentation; + private const string pageTitle = "Blazor Grid - Alignment"; + private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string metaTitle = "Blazor Grid Component - Alignment"; + private const string metaDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; private const string imageUrl = "https://i.imgur.com/kKNgo2I.png"; } 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 311dbe4e7..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 @@ -1,24 +1,28 @@ @attribute [Route(pageUrl)] -@title + - - -

    @heading

    -
    @description
    + + @pageDescription + - -
    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 = "/grid/settings"; - private const string title = "Blazor Grid Component - Settings"; - private const string heading = "Blazor Grid - Settings"; - private const string description = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string pageUrl = RouteConstants.Demos_Grid_Settings_Documentation; + private const string pageTitle = "Blazor Grid - Settings"; + private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string metaTitle = "Blazor Grid Component - Settings"; + private const string metaDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; private const string imageUrl = "https://i.imgur.com/kKNgo2I.png"; } 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 c4b78f0f9..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 @@ -1,38 +1,46 @@ @attribute [Route(pageUrl)] -@title + - - -

    @heading

    -
    @description
    + + @pageDescription + - -
    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 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 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 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 = "/grid/custom-css-class"; - private const string title = "Blazor Grid Component - Custom CSS Class"; - private const string heading = "Blazor Grid - Custom CSS Class"; - private const string description = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string pageUrl = RouteConstants.Demos_Grid_CustomCSSClass_Documentation; + private const string pageTitle = "Blazor Grid - Custom CSS Class"; + private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string metaTitle = "Blazor Grid Component - Custom CSS Class"; + private const string metaDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; private const string imageUrl = "https://i.imgur.com/kKNgo2I.png"; } 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 bd02c9ad3..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 @@ -1,26 +1,31 @@ @attribute [Route(pageUrl)] -@title + - - -

    @heading

    -
    @description
    + + @pageDescription + - -
    - +
    +
    + +
    - -
    - +
    +
    + +
    @code { - private const string pageUrl = "/grid/events"; - private const string title = "Blazor Grid Component - Events"; - private const string heading = "Blazor Grid - Events"; - private const string description = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string pageUrl = RouteConstants.Demos_Grid_Events_Documentation; + private const string pageTitle = "Blazor Grid - Events"; + private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string metaTitle = "Blazor Grid Component - Events"; + private const string metaDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; private const string imageUrl = "https://i.imgur.com/kKNgo2I.png"; } 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 97a474e11..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 @@ -1,22 +1,26 @@ @attribute [Route(pageUrl)] -@title + - - -

    @heading

    -
    @description
    + + @pageDescription + - -
    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 = "/grid/translations"; - private const string title = "Blazor Grid Component - Translations"; - private const string heading = "Blazor Grid - Translations"; - private const string description = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string pageUrl = RouteConstants.Demos_Grid_Translations_Documentation; + private const string pageTitle = "Blazor Grid - Translations"; + private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string metaTitle = "Blazor Grid Component - Translations"; + private const string metaDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; private const string imageUrl = "https://i.imgur.com/kKNgo2I.png"; } 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 b45318bfc..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 @@ -1,28 +1,33 @@ @attribute [Route(pageUrl)] -@title + - - -

    @heading

    -
    @description
    + + @pageDescription + - -
    - 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 = "/grid/fixed-header"; - private const string title = "Blazor Grid Component - Fixed header"; - private const string heading = "Blazor Grid - Fixed header"; - private const string description = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string pageUrl = RouteConstants.Demos_Grid_FixedHeader_Documentation; + private const string pageTitle = "Blazor Grid - Fixed header"; + private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string metaTitle = "Blazor Grid Component - Fixed header"; + private const string metaDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; private const string imageUrl = "https://i.imgur.com/kKNgo2I.png"; } 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 ca0ffdfb6..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 @@ -1,28 +1,34 @@ @attribute [Route(pageUrl)] -@title + - - -

    @heading

    -
    @description
    + + @pageDescription + - -
    - +
    +
    + +
    - - +
    + +
    - - +
    + +
    @code { - private const string pageUrl = "/grid/freeze-columns"; - private const string title = "Blazor Grid Component - Freeze columns"; - private const string heading = "Blazor Grid - Freeze columns"; - private const string description = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string pageUrl = RouteConstants.Demos_Grid_FreezeColumns_Documentation; + private const string pageTitle = "Blazor Grid - Freeze columns"; + private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string metaTitle = "Blazor Grid Component - Freeze columns"; + private const string metaDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; private const string imageUrl = "https://i.imgur.com/kKNgo2I.png"; } 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 beae70930..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 @@ -1,26 +1,31 @@ @attribute [Route(pageUrl)] -@title + - - -

    @heading

    -
    @description
    + + @pageDescription + - -
    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 = "/grid/detail-view"; - private const string title = "Blazor Grid Component - Detail View"; - private const string heading = "Blazor Grid - Detail View"; - private const string description = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string pageUrl = RouteConstants.Demos_Grid_DetailView_Documentation; + private const string pageTitle = "Blazor Grid - Detail View"; + private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string metaTitle = "Blazor Grid Component - Detail View"; + private const string metaDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; private const string imageUrl = "https://i.imgur.com/eetvhBB.png"; } 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 6203010cd..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 @@ -1,22 +1,26 @@ @attribute [Route(pageUrl)] -@title + - - -

    @heading

    -
    @description
    + + @pageDescription + - -
    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 = "/grid/nested-grid"; - private const string title = "Blazor Grid Component - Nested Grid"; - private const string heading = "Blazor Grid - Nested Grid"; - private const string description = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string pageUrl = RouteConstants.Demos_Grid_NestedGrid_Documentation; + private const string pageTitle = "Blazor Grid - Nested Grid"; + private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string metaTitle = "Blazor Grid Component - Nested Grid"; + private const string metaDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; private const string imageUrl = "https://i.imgur.com/IpMhPwG.png"; } 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 78ea5abce..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 @@ -1,39 +1,47 @@ @attribute [Route(pageUrl)] -@title + - - -

    @heading

    -
    @description
    + + @pageDescription + - -
    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 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.
    - +
    +
    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.
    - +
    +
    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.
    - +
    +
    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.
    - +
    +
    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 = "/grid/other"; - private const string title = "Blazor Grid Component - Other examples"; - private const string heading = "Blazor Grid - Other examples"; - private const string description = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string pageUrl = RouteConstants.Demos_Grid_OtherExamples_Documentation; + private const string pageTitle = "Blazor Grid - Other examples"; + private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; + private const string metaTitle = "Blazor Grid Component - Other examples"; + private const string metaDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting."; private const string imageUrl = "https://i.imgur.com/kKNgo2I.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor index 16fe2dd63..4248bc0c2 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor @@ -1,61 +1,75 @@ -@page "/icons" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Icons

    -
    - The Icon component will display an icon from any icon font. -
    + + @pageDescription + - - +
    + +
    - - +
    + +
    - -
    - 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 string pageUrl = "/icons"; - private string title = "Blazor Icon Component"; - private string description = "Blazor Bootstrap icon component will display an icon from any icon font."; - private string imageUrl = "https://i.imgur.com/273TamX.png"; + private const string pageUrl = RouteConstants.Demos_Icons_Documentation; + private const string pageTitle = "Blazor Icon"; + private const string pageDescription = "Blazor Bootstrap icon component will display an icon from any icon font."; + private const string metaTitle = "Blazor Icon Component"; + private const string metaDescription = "Blazor Bootstrap icon component will display an icon from any icon font."; + private const string imageUrl = "https://i.imgur.com/273TamX.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor index 37e14c4c0..afbd46df7 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor @@ -1,34 +1,41 @@ -@page "/images" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Images

    -
    Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them.
    + + @pageDescription + - -
    - 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. -
    - - - - - - +
    +
    + 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. +
    + +
    + +
    + + + +
    @code { - private string pageUrl = "/images"; - private string title = "Blazor Image Component"; - private string description = "Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them."; - private string imageUrl = "https://i.imgur.com/eiSTmvO.png"; + private const string pageUrl = RouteConstants.Demos_Images_Documentation; + private const string pageTitle = "Blazor Image"; + private const string pageDescription = "Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them."; + private const string metaTitle = "Blazor Image Component"; + private const string metaDescription = "Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them."; + private const string imageUrl = "https://i.imgur.com/eiSTmvO.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor index 6041f4148..172d701ea 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor @@ -356,7 +356,7 @@
    - This demo website is built using the Blazor Bootstrap library and published on the Azure Static Web App. + This demo website is built using the Blazor Bootstrap library and published on the Azure Web App. See our source code on GitHub.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor index e61f9d137..6676c5df0 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor @@ -1,38 +1,44 @@ -@page "/layout-setup/blazor-server" +@attribute [Route(pageUrl)] -@title + - - -

    Layout Setup - Blazor Server

    -
    Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks.
    + + @pageDescription + - -
    - 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 string pageUrl = "/layout-setup/blazor-server"; - private string title = "Blazor Bootstrap Layout Setup - Blazor Server"; - private string description = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers."; - private string imageUrl = "https://i.imgur.com/SCbZVd4.jpg"; + private const string pageUrl = "/layout-setup/blazor-server"; + private const string pageTitle = "Blazor Bootstrap Layout Setup - Blazor Server"; + private const string pageDescription = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers."; + private const string metaTitle = "Blazor Bootstrap Layout Setup - Blazor Server"; + private const string metaDescription = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers."; + private const string imageUrl = "https://i.imgur.com/SCbZVd4.jpg"; private string version = default!; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor index edd649b98..a1b64fcbb 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor @@ -1,39 +1,44 @@ -@page "/layout" -@page "/layout-setup/blazor-webassembly" +@attribute [Route(pageUrl)] -@title + - - -

    Layout Setup - Blazor WebAssembly

    -
    Get started with the Enterprise-class Blazor Bootstrap Component library built on the Blazor and Bootstrap CSS frameworks.
    + + @pageDescription + - -
    - 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 string pageUrl = "/layout-setup/blazor-webassembly"; - private string title = "Blazor Bootstrap Layout Setup - Blazor WebAssembly"; - private string description = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers."; - private string imageUrl = "https://i.imgur.com/SCbZVd4.jpg"; + private const string pageUrl = "/layout-setup/blazor-webassembly"; + private const string pageTitle = "Blazor Bootstrap Layout Setup - Blazor WebAssembly"; + private const string pageDescription = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers."; + private const string metaTitle = "Blazor Bootstrap Layout Setup - Blazor WebAssembly"; + private const string metaDescription = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers."; + private const string imageUrl = "https://i.imgur.com/SCbZVd4.jpg"; private string version = default!; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor index 52b638cad..ecc5f8e76 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor @@ -1,67 +1,81 @@ -@page "/google-map" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Google Map

    -
    - Blazor Bootstrap Google Map component will create maps to show locations anywhere in the world using the Google JavaScript API. -
    + + @pageDescription + - -
    - 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 string pageUrl = "/google-map"; - private string title = "Blazor Google Map Component"; - private string description = "Blazor Bootstrap Google Map component will create maps to show locations anywhere in the world using the Google JavaScript API."; - private string imageUrl = "https://i.imgur.com/AbyDP51.png"; + private const string pageUrl = RouteConstants.Demos_GoogleMap_Documentation; + private const string pageTitle = "Blazor Google Map"; + private const string pageDescription = "Blazor Bootstrap Google Map component will create maps to show locations anywhere in the world using the Google JavaScript API."; + private const string metaTitle = "Blazor Google Map Component"; + private const string metaDescription = "Blazor Bootstrap Google Map component will create maps to show locations anywhere in the world using the Google JavaScript API."; + private const string imageUrl = "https://i.imgur.com/AbyDP51.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor index c0236bd22..e27df3ec0 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor @@ -1,112 +1,132 @@ -@page "/markdown" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Markdown Preview

    -
    Use Blazor Bootstrap Markdown component to add formatting, tables, images, and more to your project pages.
    + + @pageDescription + - -
    - - - -
    - 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 string pageUrl = "/markdown"; - private string title = "Blazor Markdown Component"; - private string description = "Use Blazor Bootstrap Markdown component to add formatting, tables, images, and more to your project pages."; - private string imageUrl = "https://i.imgur.com/FhN1caj.png"; + private const string pageUrl = RouteConstants.Demos_Markdown_Documentation; + private const string pageTitle = "Blazor Markdown"; + private const string pageDescription = "Use Blazor Bootstrap Markdown component to add formatting, tables, images, and more to your project pages."; + private const string metaTitle = "Blazor Markdown Component"; + private const string metaDescription = "Use Blazor Bootstrap Markdown component to add formatting, tables, images, and more to your project pages."; + private const string imageUrl = "https://i.imgur.com/FhN1caj.png"; } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor index ee779d579..dc325f92e 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor @@ -1,72 +1,83 @@ -@page "/modals" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Modal

    -
    - Use Blazor Bootstrap modal component to add dialogs to your site for lightboxes, user notifications, or completely custom content. -
    + + @pageDescription + - - +
    + +
    - -
    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 string pageUrl = "/modals"; - private string title = "Blazor Modal Component"; - private string description = "Use Blazor Bootstrap modal component to add dialogs to your site for lightboxes, user notifications, or completely custom content."; - private string imageUrl = "https://i.imgur.com/aWbURjD.jpg"; + private const string pageUrl = RouteConstants.Demos_Modal_Documentation; + private const string pageTitle = "Blazor Modal"; + private const string pageDescription = "Use Blazor Bootstrap modal component to add dialogs to your site for lightboxes, user notifications, or completely custom content."; + private const string metaTitle = "Blazor Modal Component"; + private const string metaDescription = "Use Blazor Bootstrap modal component to add dialogs to your site for lightboxes, user notifications, or completely custom content."; + private const string imageUrl = "https://i.imgur.com/aWbURjD.jpg"; } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor index 5fd4b28ef..b9f1dc6cc 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor @@ -1,66 +1,75 @@ -@page "/offcanvas" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Offcanvas

    -
    - Build hidden sidebars into your project for navigation, shopping carts, and more with a offcanvas component. -
    + + @pageDescription + 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 string pageUrl = "/offcanvas"; - private string title = "Blazor Offcanvas Component"; - private string description = "Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component."; - private string imageUrl = "https://i.imgur.com/1vNz5Ci.jpg"; + private const string pageUrl = RouteConstants.Demos_Offcanvas_Documentation; + private const string pageTitle = "Blazor Offcanvas"; + private const string pageDescription = "Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component."; + private const string metaTitle = "Blazor Offcanvas Component"; + private const string metaDescription = "Build hidden sidebars into your project for navigation, shopping carts, and more with Blazor Bootstrap offcanvas component."; + private const string imageUrl = "https://i.imgur.com/1vNz5Ci.jpg"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor index 867508b90..9f2acba7b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor @@ -1,39 +1,47 @@ -@page "/pagination" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Pagination

    -
    - Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages. -
    + + @pageDescription + - -
    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.
    - +
    +
    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.
    - +
    +
    Fancy larger or smaller pagination? Add Size="PaginationSize.Small" or Size="PaginationSize.Large" for additional sizes.
    + +
    - - +
    + +
    - - +
    + +
    @code { - private string pageUrl = "/pagination"; - private string title = "Blazor Pagination Component"; - private string description = "Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages."; - private string imageUrl = "https://i.imgur.com/SCbZVd4.jpg"; + private const string pageUrl = RouteConstants.Demos_Pagination_Documentation; + private const string pageTitle = "Blazor Pagination"; + private const string pageDescription = "Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages."; + private const string metaTitle = "Blazor Pagination Component"; + private const string metaDescription = "Use Blazor Bootstrap pagination component to indicate a series of related content exists across multiple pages."; + private const string imageUrl = "https://i.imgur.com/SCbZVd4.jpg"; } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor index 1fc391789..3a834d82f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor @@ -1,35 +1,40 @@ -@page "/pdf-viewer" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor PDF Viewer

    -
    - The Blazor PDF Viewer component allows users to view PDF files directly in the browser, without relying on third-party browser tools or extensions. -
    + + @pageDescription + - - - - -
    - 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)" - - +
    + +
    + +
    +
    + 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)" + + +
    @code { - private string pageUrl = "/pdf-viewer"; - private string title = "Blazor PDF Viewer Component"; - private string description = "The Blazor PDF Viewer component allows users to view PDF files directly in the browser, without relying on third-party browser tools or extensions."; - private string imageUrl = "https://i.imgur.com/7Vz9Efi.png"; + private const string pageUrl = RouteConstants.Demos_PDFViewer_Documentation; + private const string pageTitle = "Blazor PDF Viewer"; + private const string pageDescription = "The Blazor PDF Viewer component allows users to view PDF files directly in the browser, without relying on third-party browser tools or extensions."; + private const string metaTitle = "Blazor PDF Viewer Component"; + private const string metaDescription = "The Blazor PDF Viewer component allows users to view PDF files directly in the browser, without relying on third-party browser tools or extensions."; + private const string imageUrl = "https://i.imgur.com/7Vz9Efi.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Placeholders/PlaceholderDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Placeholders/PlaceholderDocumentation.razor index 895f57f62..e8e9b4c86 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Placeholders/PlaceholderDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Placeholders/PlaceholderDocumentation.razor @@ -1,43 +1,51 @@ -@page "/placeholders" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Placeholders

    -
    - Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading. -
    + + @pageDescription + - -
    - Placeholders can be used to enhance the experience of your application. -
    +
    +
    + Placeholders can be used to enhance the experience of your application. +
    +
    - - +
    + +
    - -
    You can change the width through PlaceholderWidth, width utilities, or inline styles.
    - +
    +
    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.
    - +
    +
    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.
    - +
    +
    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.
    - +
    +
    Animate placeholders with PlaceholderAnimation.Glow or PlaceholderAnimation.Wave to better convey the perception of something being actively loaded.
    + +
    @code { - private string pageUrl = "/placeholders"; - private string title = "Blazor Placeholder Component"; - private string description = "Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading."; - private string imageUrl = "https://i.imgur.com/JcLisSd.png"; + private const string pageUrl = RouteConstants.Demos_Placeholders_Documentation; + private const string pageTitle = "Blazor Placeholder"; + private const string pageDescription = "Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading."; + private const string metaTitle = "Blazor Placeholder Component"; + private const string metaDescription = "Use Blazor Bootstrap loading placeholders for your components or pages to indicate something may still be loading."; + private const string imageUrl = "https://i.imgur.com/JcLisSd.png"; } \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Preload/PreloadDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Preload/PreloadDocumentation.razor index e5c70fded..db704309b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Preload/PreloadDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Preload/PreloadDocumentation.razor @@ -1,46 +1,54 @@ -@page "/preload" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Preload

    -
    Indicate the loading state of a page with Blazor Bootstrap preload component.
    + + @pageDescription + - -
    -
      -
    • 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 string pageUrl = "/preload"; - private string title = "Blazor Preload Component"; - private string description = "Indicate the loading state of a page with Blazor Bootstrap preload component."; - private string imageUrl = "https://i.imgur.com/2cPuqFa.png"; + private const string pageUrl = RouteConstants.Demos_Preload_Documentation; + private const string pageTitle = "Blazor Preload"; + private const string pageDescription = "Indicate the loading state of a page with Blazor Bootstrap preload component."; + private const string metaTitle = "Blazor Preload Component"; + private const string metaDescription = "Indicate the loading state of a page with Blazor Bootstrap preload component."; + private const string imageUrl = "https://i.imgur.com/2cPuqFa.png"; [Inject] PreloadService PreloadService { get; set; } = default!; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Progress/ProgressDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Progress/ProgressDocumentation.razor index be31a0133..cfdbb758c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Progress/ProgressDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Progress/ProgressDocumentation.razor @@ -1,55 +1,69 @@ -@page "/progress" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Progress

    -
    Documentation and examples for using the Blazor Progress component featuring support for stacked bars, animated backgrounds, and text labels.
    + + @pageDescription + - - +
    + +
    - -
    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 string pageUrl = "/progress"; - private string title = "Blazor Progress Component"; - private string description = "Documentation and examples for using Blazor Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels."; - private string imageUrl = "https://i.imgur.com/MK142lQ.png"; + private const string pageUrl = RouteConstants.Demos_Progress_Documentation; + private const string pageTitle = "Blazor Progress"; + private const string pageDescription = "Documentation and examples for using Blazor Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels."; + private const string metaTitle = "Blazor Progress Component"; + private const string metaDescription = "Documentation and examples for using Blazor Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels."; + private const string imageUrl = "https://i.imgur.com/MK142lQ.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/RibbonDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/RibbonDocumentation.razor index 3bd21f10e..daded6f5a 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/RibbonDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/RibbonDocumentation.razor @@ -1,29 +1,35 @@ -@page "/ribbon" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Ribbon

    -
    Documentation and examples for using the Blazor Bootstrap Ribbon component.
    + + @pageDescription + - -
    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 string pageUrl = "/ribbon"; - private string title = "Blazor Ribbon Component"; - private string description = "Documentation and examples for using the Blazor Bootstrap Ribbon component."; - private string imageUrl = "https://i.imgur.com/LpZVLbF.png"; + private const string pageUrl = RouteConstants.Demos_Ribbon_Documentation; + private const string pageTitle = "Blazor Ribbon"; + private const string pageDescription = "Documentation and examples for using the Blazor Bootstrap Ribbon component."; + private const string metaTitle = "Blazor Ribbon Component"; + private const string metaDescription = "Documentation and examples for using the Blazor Bootstrap Ribbon component."; + private const string imageUrl = "https://i.imgur.com/LpZVLbF.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ScriptLoader/ScriptLoaderDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/ScriptLoader/ScriptLoaderDocumentation.razor index 075f4d2ea..68f5e2046 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/ScriptLoader/ScriptLoaderDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/ScriptLoader/ScriptLoaderDocumentation.razor @@ -1,21 +1,22 @@ -@page "/script-loader" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Script Loader

    -
    - Documentation and examples for using the Blazor Bootstrap Script Loader component. -
    + + @pageDescription + - -
    - 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,18 +43,21 @@ - -
    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 string pageUrl = "/script-loader"; - private string title = "Blazor ScriptLoader Component"; - private string description = "Documentation and examples for using the Blazor Bootstrap ScriptLoader component."; - private string imageUrl = "https://i.imgur.com/sBiYPeQ.png"; + private const string pageUrl = RouteConstants.Demos_ScriptLoader_Documentation; + private const string pageTitle = "Blazor ScriptLoader"; + private const string pageDescription = "Documentation and examples for using the Blazor Bootstrap ScriptLoader component."; + private const string metaTitle = "Blazor ScriptLoader Component"; + private const string metaDescription = "Documentation and examples for using the Blazor Bootstrap ScriptLoader component."; + private const string imageUrl = "https://i.imgur.com/sBiYPeQ.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor index 29c7ddd05..fa9cf45fb 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor @@ -1,42 +1,55 @@ @page "/modal-service" -@title +@attribute [Route(pageUrl)] - + -

    Blazor Modal Service

    -
    Use Blazor Bootstrap modal service to show quick dialogs to your site for lightboxes, user notifications, or completely custom content.
    + + @pageDescription + - - +
    + +
    - - +
    + +
    - - +
    + +
    - - +
    + +
    - - +
    + +
    - - +
    + +
    - -
    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 string pageUrl = "/modal-service"; - private string title = "Blazor Modal Service"; - private string description = "Use Blazor Bootstrap modal service to show quick dialogs to your site for lightboxes, user notifications, or completely custom content."; - private string imageUrl = "https://i.imgur.com/Tze7msN.png"; + private const string pageUrl = RouteConstants.Demos_ModalService_Documentation; + private const string pageTitle = "Blazor Modal Service"; + private const string pageDescription = "Use Blazor Bootstrap modal service to show quick dialogs to your site for lightboxes, user notifications, or completely custom content."; + private const string metaTitle = "Blazor Modal Service"; + private const string metaDescription = "Use Blazor Bootstrap modal service to show quick dialogs to your site for lightboxes, user notifications, or completely custom content."; + private const string imageUrl = "https://i.imgur.com/Tze7msN.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor index 3a2a9388e..68766d8b1 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor @@ -1,63 +1,76 @@ -@page "/sidebar" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Sidebar

    -
    - Use the Blazor Bootstrap Sidebar component to show consistent cross-browser, responsive and cross-device navigation links, additional information, or other content. -
    + + @pageDescription + - - - - -
    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.
    - +
    + +
    + +
    +
    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.
    + +
    @code { - private string pageUrl = "/sidebar"; - private string title = "Blazor Sidebar Component"; - private string description = "Use the Blazor Bootstrap Sidebar component to show consistent cross-browser, responsive and cross-device navigation links, additional information, or other content."; - private string imageUrl = "https://i.imgur.com/d91Q9Zt.png"; + private const string pageUrl = RouteConstants.Demos_Sidebar_Documentation; + private const string pageTitle = "Blazor Sidebar"; + private const string pageDescription = "Use the Blazor Bootstrap Sidebar component to show consistent cross-browser, responsive and cross-device navigation links, additional information, or other content."; + private const string metaTitle = "Blazor Sidebar Component"; + private const string metaDescription = "Use the Blazor Bootstrap Sidebar component to show consistent cross-browser, responsive and cross-device navigation links, additional information, or other content."; + private const string imageUrl = "https://i.imgur.com/d91Q9Zt.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor index 7146edeef..cd3c48aaa 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor @@ -1,47 +1,56 @@ -@page "/sidebar2" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Sidebar2

    -
    - Use the Blazor Bootstrap Sidebar2 component to display consistent, cross-browser, and responsive navigation links that support more than two nested levels. -
    + + @pageDescription + - -
    - - - -
    - - -@* -
    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 string pageUrl = "sidebar2"; - private string title = "Blazor Sidebar2 Component"; - private string description = "Use the Blazor Bootstrap Sidebar2 component to display consistent, cross-browser, and responsive navigation links that support more than two nested levels."; - private string imageUrl = "https://i.imgur.com/U0l6wXo.png"; + private const string pageUrl = RouteConstants.Demos_Sidebar2_Documentation; + private const string pageTitle = "Blazor Sidebar2"; + private const string pageDescription = "Use the Blazor Bootstrap Sidebar2 component to display consistent, cross-browser, and responsive navigation links that support more than two nested levels."; + private const string metaTitle = "Blazor Sidebar2 Component"; + private const string metaDescription = "Use the Blazor Bootstrap Sidebar2 component to display consistent, cross-browser, and responsive navigation links that support more than two nested levels."; + private const string imageUrl = "https://i.imgur.com/U0l6wXo.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor index 15c7f96ef..7ae499349 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor @@ -1,79 +1,90 @@ -@page "/sortable-list" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Sortable List

    -
    - The Blazor Bootstrap Sortable List component, built on top of SortableJS, enables drag-and-drop reordering of lists. -
    + + @pageDescription + - -
    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 string pageUrl = "/sortable-list"; - private string title = "Blazor Sortable List Component"; - private string description = "The Blazor Bootstrap Sortable List component, built on top of SortableJS, enables drag-and-drop reordering of lists."; - private string imageUrl = "https://i.imgur.com/bfzP8Yi.png"; + private const string pageUrl = RouteConstants.Demos_SortableList_Documentation; + private const string pageTitle = "Blazor Sortable List"; + private const string pageDescription = "The Blazor Bootstrap Sortable List component, built on top of SortableJS, enables drag-and-drop reordering of lists."; + private const string metaTitle = "Blazor Sortable List Component"; + private const string metaDescription = "The Blazor Bootstrap Sortable List component, built on top of SortableJS, enables drag-and-drop reordering of lists."; + private const string imageUrl = "https://i.imgur.com/bfzP8Yi.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Spinners/SpinnersDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Spinners/SpinnersDocumentation.razor index 8a6d1c216..a781a2259 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Spinners/SpinnersDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Spinners/SpinnersDocumentation.razor @@ -1,65 +1,76 @@ -@page "/spinner" -@page "/spinners" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Spinners

    -
    - Visualize the loading state of a component or page using the Blazor Bootstrap Spinner component. -
    + + @pageDescription + - -
    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 string pageUrl = "/spinner"; - private string title = "Blazor Spinner Component"; - private string description = "Visualize the loading state of a component or page using the Blazor Bootstrap Spinner component."; - private string imageUrl = "https://i.imgur.com/G4wyEd6.png"; + private const string pageUrl = RouteConstants.Demos_Spinners_Documentation; + private const string pageTitle = "Blazor Spinner"; + private const string pageDescription = "Visualize the loading state of a component or page using the Blazor Bootstrap Spinner component."; + private const string metaTitle = "Blazor Spinner Component"; + private const string metaDescription = "Visualize the loading state of a component or page using the Blazor Bootstrap Spinner component."; + private const string imageUrl = "https://i.imgur.com/G4wyEd6.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor index 2814df67f..4c708bf0f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor @@ -1,70 +1,80 @@ -@page "/tabs" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Tabs

    -
    - Documentation and examples for using Blazor Bootstrap Tabs components. -
    + + @pageDescription + - - - - -
    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,35 +91,43 @@ - -
    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 string pageUrl = "/tabs"; - private string title = "Blazor Tabs Component"; - private string description = "Documentation and examples for using Blazor Bootstrap Tabs components."; - private string imageUrl = "https://i.imgur.com/ranwriJ.png"; + private const string pageUrl = RouteConstants.Demos_Tabs_Documentation; + private const string pageTitle = "Blazor Tabs"; + private const string pageDescription = "Documentation and examples for using Blazor Bootstrap Tabs components."; + private const string metaTitle = "Blazor Tabs Component"; + private const string metaDescription = "Documentation and examples for using Blazor Bootstrap Tabs components."; + private const string imageUrl = "https://i.imgur.com/ranwriJ.png"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/ToastsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/ToastsDocumentation.razor index d48488e8d..4aaf04b70 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/ToastsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/ToastsDocumentation.razor @@ -1,58 +1,70 @@ -@page "/toasts" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Toasts

    -
    Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
    + + @pageDescription +
    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 string pageUrl = "/toasts"; - private string title = "Blazor Toasts Component"; - private string description = "Push notifications to your visitors with a toast, a lightweight and easily customizable Blazor Bootstrap alert message."; - private string imageUrl = "https://i.imgur.com/VRglJqU.jpg"; + private const string pageUrl = RouteConstants.Demos_Toasts_Documentation; + private const string pageTitle = "Blazor Toasts"; + private const string pageDescription = "Push notifications to your visitors with a toast, a lightweight and easily customizable Blazor Bootstrap alert message."; + private const string metaTitle = "Blazor Toasts Component"; + private const string metaDescription = "Push notifications to your visitors with a toast, a lightweight and easily customizable Blazor Bootstrap alert message."; + private const string imageUrl = "https://i.imgur.com/VRglJqU.jpg"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Tooltips/TooltipsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Tooltips/TooltipsDocumentation.razor index a51a7f360..4acb07eec 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Tooltips/TooltipsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Tooltips/TooltipsDocumentation.razor @@ -1,51 +1,64 @@ -@page "/tooltips" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Tooltips

    + + @pageDescription + - - +
    + +
    - - +
    + +
    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 string pageUrl = "/tooltips"; - private string title = "Blazor Tooltip Component"; - private string description = "Use Blazor Bootstrap tooltip component to add custom tooltips to your web pages."; - private string imageUrl = "https://i.imgur.com/PGlmZS3.jpg"; + private const string pageUrl = RouteConstants.Demos_Tooltips_Documentation; + private const string pageTitle = "Blazor Tooltip"; + private const string pageDescription = "Use Blazor Bootstrap tooltip component to add custom tooltips to your web pages."; + private const string metaTitle = "Blazor Tooltip Component"; + private const string metaDescription = "Use Blazor Bootstrap tooltip component to add custom tooltips to your web pages."; + private const string imageUrl = "https://i.imgur.com/PGlmZS3.jpg"; } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor index beb0a7057..4863b7427 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor @@ -1,30 +1,33 @@ -@page "/utils/color-utility" +@attribute [Route(pageUrl)] -@title + - - -

    Blazor Bootstrap Color Utils

    -
    - For data visualization, you can use the predefined palettes ColorUtility.CategoricalSixColors for a 6-color palette and ColorUtility.CategoricalTwelveColors for a 12-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. -
    + + @pageDescription + - -
    - -
    +
    +
    + +
    +
    - -
    - -
    +
    +
    + +
    +
    @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/Components/Shared/PageHero.razor b/BlazorBootstrap.Demo.RCL/Components/Shared/PageHero.razor new file mode 100644 index 000000000..75b7c5e49 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Shared/PageHero.razor @@ -0,0 +1,7 @@ +@namespace BlazorBootstrap.Demo.RCL +@inherits BlazorBootstrapComponentBase + +

    @Heading

    +
    + @LeadSection +
    \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/PageHero.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Shared/PageHero.razor.cs new file mode 100644 index 000000000..ba7cf6e5c --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Shared/PageHero.razor.cs @@ -0,0 +1,10 @@ +namespace BlazorBootstrap.Demo.RCL; + +public partial class PageHero : BlazorBootstrapComponentBase +{ + [Parameter] + public string? Heading { get; set; } + + [Parameter] + public RenderFragment? LeadSection { get; set; } +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/MetaTags.razor b/BlazorBootstrap.Demo.RCL/Components/Shared/PageMetaTags.razor similarity index 94% rename from BlazorBootstrap.Demo.RCL/Components/Shared/MetaTags.razor rename to BlazorBootstrap.Demo.RCL/Components/Shared/PageMetaTags.razor index d848b80f4..f9f3f2edc 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Shared/MetaTags.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Shared/PageMetaTags.razor @@ -1,4 +1,7 @@ @namespace BlazorBootstrap.Demo.RCL +@inherits BlazorBootstrapComponentBase + +@title diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/MetaTags.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Shared/PageMetaTags.razor.cs similarity index 57% rename from BlazorBootstrap.Demo.RCL/Components/Shared/MetaTags.razor.cs rename to BlazorBootstrap.Demo.RCL/Components/Shared/PageMetaTags.razor.cs index 330ecbad4..9a87ef0f6 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Shared/MetaTags.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Shared/PageMetaTags.razor.cs @@ -1,43 +1,39 @@ namespace BlazorBootstrap.Demo.RCL; -public partial class MetaTags : ComponentBase +public partial class PageMetaTags : BlazorBootstrapComponentBase { - #region Members - - private string siteName => "Blazor Bootstrap"; - - private string title => $"{Title} | {siteName}"; - - private string url => $"https://demos.blazorbootstrap.com{PageUrl}"; - - #endregion - - #region Methods - - #endregion - - #region Properties + #region Properties, Indexers /// - /// Meta Url. - /// Example: /alerts, /modal + /// Meta Description. /// - [Parameter] public string PageUrl { get; set; } = null!; + [Parameter] + public string Description { get; set; } = null!; /// - /// Page Title / Meta Title. + /// Meta Image Url. /// - [Parameter] public string Title { get; set; } = null!; + [Parameter] + public string ImageUrl { get; set; } = null!; /// - /// Meta Description. + /// Meta Url. + /// Example: /alerts, /modal /// - [Parameter] public string Description { get; set; } = null!; + [Parameter] + public string PageUrl { get; set; } = null!; + + private string siteName => "Blazor Bootstrap"; + + private string title => $"{Title} | {siteName}"; /// - /// Meta Image Url. + /// Page Title / Meta Title. /// - [Parameter] public string ImageUrl { get; set; } = null!; + [Parameter] + public string Title { get; set; } = null!; + + private string url => $"https://demos.blazorbootstrap.com{PageUrl}"; #endregion } diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/Section.razor b/BlazorBootstrap.Demo.RCL/Components/Shared/Section.razor new file mode 100644 index 000000000..a6e237442 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Shared/Section.razor @@ -0,0 +1,48 @@ +@namespace BlazorBootstrap.Demo.RCL +@inherits BlazorBootstrapComponentBase + +
    + + @if (Size == HeadingSize.H2) + { +

    + @Name + # +

    + } + else if (Size == HeadingSize.H3) + { +

    + @Name + # +

    + } + else if (Size == HeadingSize.H4) + { +

    + @Name + # +

    + } + else if (Size == HeadingSize.H5) + { +
    + @Name + # +
    + } + else if (Size == HeadingSize.H6) + { +
    + @Name + # +
    + } + + @ChildContent + +
    \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/Section.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Shared/Section.razor.cs new file mode 100644 index 000000000..115d9a92c --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Shared/Section.razor.cs @@ -0,0 +1,56 @@ +namespace BlazorBootstrap.Demo.RCL; + +public partial class Section : BlazorBootstrapComponentBase +{ + #region Members + + private string? headerClassNames => "mt-4 mb-3"; + + private string link => $"{PageUrl}#{Link}".Trim().ToLower(); + + #endregion + + #region Methods + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender && IsRenderComplete) + { + await Task.Delay(200); + await JSRuntime.InvokeVoidAsync("navigateToHeading"); + } + + await base.OnAfterRenderAsync(firstRender); + } + + private async Task OnClick() + { + await JSRuntime.InvokeVoidAsync("navigateToHeading"); + } + + #endregion + + #region Properties, Indexers + + /// + /// Gets or sets the child content. + /// + /// + /// Default value is . + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + [Parameter] + public bool IsMobile { get; set; } = true; + + [Parameter] public string? Link { get; set; } + + [Parameter] public string? Name { get; set; } + + [Parameter] public string? PageUrl { get; set; } + + [Parameter] public HeadingSize Size { get; set; } + + #endregion +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/SectionHeading.razor b/BlazorBootstrap.Demo.RCL/Components/Shared/SectionHeading.razor deleted file mode 100644 index 92f3d714c..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Shared/SectionHeading.razor +++ /dev/null @@ -1,32 +0,0 @@ -@namespace BlazorBootstrap.Demo.RCL - -@if (Size == HeadingSize.H2) -{ -

    - @Text# -

    -} -else if (Size == HeadingSize.H3) -{ -

    - @Text# -

    -} -else if (Size == HeadingSize.H4) -{ -

    - @Text# -

    -} -else if (Size == HeadingSize.H5) -{ -
    - @Text# -
    -} -else if (Size == HeadingSize.H6) -{ -
    - @Text# -
    -} diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/SectionHeading.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Shared/SectionHeading.razor.cs deleted file mode 100644 index 56a57ff6b..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Shared/SectionHeading.razor.cs +++ /dev/null @@ -1,39 +0,0 @@ -namespace BlazorBootstrap.Demo.RCL; -public partial class SectionHeading : ComponentBase -{ - #region Members - - private string link => $"{PageUrl}#{HashTagName}".Trim().ToLower(); - - #endregion - - #region Methods - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - await Task.Delay(200); - await JS.InvokeVoidAsync("navigateToHeading"); - await base.OnAfterRenderAsync(firstRender); - } - - private async Task OnClick() - { - await JS.InvokeVoidAsync("navigateToHeading"); - } - - #endregion - - #region Properties - - [Parameter] public HeadingSize Size { get; set; } - - [Parameter] public string Text { get; set; } = null!; - - [Parameter] public string PageUrl { get; set; } = null!; - - [Parameter] public string HashTagName { get; set; } = null!; - - [Inject] protected IJSRuntime JS { get; set; } = null!; - - #endregion -} diff --git a/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs b/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs new file mode 100644 index 000000000..077fae2a8 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs @@ -0,0 +1,104 @@ +namespace BlazorBootstrap.Demo.RCL; + +public static class RouteConstants +{ + public const string Blog_Prefix = "/blog"; + public const string Docs_Prefix = "/docs"; + 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"; + + // Content + public const string Demos_Icons_Documentation = Demos_Prefix + "/icons"; + public const string Demos_Images_Documentation = Demos_Prefix + "/images"; + + // Forms + public const string Demos_Forms_Prefix = Demos_Prefix + "/form"; + public const string Demos_AutoComplete_Documentation = Demos_Forms_Prefix + "/autocomplete"; + public const string Demos_CurrencyInput_Documentation = Demos_Forms_Prefix + "/currency-input"; + public const string Demos_DateInput_Documentation = Demos_Forms_Prefix + "/date-input"; + public const string Demos_NumberInput_Documentation = Demos_Forms_Prefix + "/number-input"; + public const string Demos_RangeInput_Documentation = Demos_Forms_Prefix + "/range-input"; + public const string Demos_Switch_Documentation = Demos_Forms_Prefix + "/switch"; + public const string Demos_TimeInput_Documentation = Demos_Forms_Prefix + "/time-input"; + + // Components + public const string Demos_Accordion_Documentation = Demos_Prefix + "/accordion"; + public const string Demos_Alerts_Documentation = Demos_Prefix + "/alerts"; + public const string Demos_Badge_Documentation = Demos_Prefix + "/badge"; + public const string Demos_Breadcrumb_Documentation = Demos_Prefix + "/breadcrumb"; + public const string Demos_Buttons_Documentation = Demos_Prefix + "/buttons"; + public const string Demos_Callout_Documentation = Demos_Prefix + "/callout"; + public const string Demos_Card_Documentation = Demos_Prefix + "/card"; + public const string Demos_Carousel_Documentation = Demos_Prefix + "/carousel"; + public const string Demos_Charts_Documentation = Demos_Prefix + "/charts"; + public const string Demos_Collapse_Documentation = Demos_Prefix + "/collapse"; + public const string Demos_ConfirmDialog_Documentation = Demos_Prefix + "/confirm-dialog"; + public const string Demos_Dropdown_Documentation = Demos_Prefix + "/dropdown"; + public const string Demos_GoogleMap_Documentation = Demos_Prefix + "/google-map"; + + #region Grid + public const string Demos_Grid_Prefix = Demos_Prefix + "/grid"; + public const string Demos_Grid_Overview_Documentation = Demos_Grid_Prefix + "/overview"; + public const string Demos_Grid_Alignment_Documentation = Demos_Grid_Prefix + "/alignment"; + public const string Demos_Grid_CustomCSSClass_Documentation = Demos_Grid_Prefix + "/custom-css-class"; + public const string Demos_Grid_DataBinding_Documentation = Demos_Grid_Prefix + "/data-binding"; + public const string Demos_Grid_DetailView_Documentation = Demos_Grid_Prefix + "/detail-view"; + public const string Demos_Grid_Events_Documentation = Demos_Grid_Prefix + "/events"; + public const string Demos_Grid_Filters_Documentation = Demos_Grid_Prefix + "/filters"; + public const string Demos_Grid_FixedHeader_Documentation = Demos_Grid_Prefix + "/fixed-header"; + public const string Demos_Grid_FreezeColumns_Documentation = Demos_Grid_Prefix + "/freeze-columns"; + public const string Demos_Grid_Settings_Documentation = Demos_Grid_Prefix + "/settings"; + public const string Demos_Grid_NestedGrid_Documentation = Demos_Grid_Prefix + "/nested-grid"; + public const string Demos_Grid_Paging_Documentation = Demos_Grid_Prefix + "/paging"; + public const string Demos_Grid_Selection_Documentation = Demos_Grid_Prefix + "/selection"; + public const string Demos_Grid_Sorting_Documentation = Demos_Grid_Prefix + "/sorting"; + public const string Demos_Grid_Translations_Documentation = Demos_Grid_Prefix + "/translations"; + public const string Demos_Grid_OtherExamples_Documentation = Demos_Grid_Prefix + "/other"; + #endregion Grid + + public const string Demos_Markdown_Documentation = Demos_Prefix + "/markdown"; + public const string Demos_Modal_Documentation = Demos_Prefix + "/modals"; + public const string Demos_Offcanvas_Documentation = Demos_Prefix + "/offcanvas"; + public const string Demos_Pagination_Documentation = Demos_Prefix + "/pagination"; + public const string Demos_PDFViewer_Documentation = Demos_Prefix + "/pdf-viewer"; + public const string Demos_Placeholders_Documentation = Demos_Prefix + "/placeholders"; + public const string Demos_Preload_Documentation = Demos_Prefix + "/preload"; + public const string Demos_Progress_Documentation = Demos_Prefix + "/progress"; + public const string Demos_Ribbon_Documentation = Demos_Prefix + "/ribbon"; + public const string Demos_ScriptLoader_Documentation = Demos_Prefix + "/script-loader"; + public const string Demos_Sidebar_Documentation = Demos_Prefix + "/sidebar"; + public const string Demos_Sidebar2_Documentation = Demos_Prefix + "/sidebar2"; + public const string Demos_SortableList_Documentation = Demos_Prefix + "/sortable-list"; + public const string Demos_Spinners_Documentation = Demos_Prefix + "/spinners"; + public const string Demos_Tabs_Documentation = Demos_Prefix + "/tabs"; + public const string Demos_Toasts_Documentation = Demos_Prefix + "/toasts"; + public const string Demos_Tooltips_Documentation = Demos_Prefix + "/tooltips"; + + // Data Visualization + public const string Demos_Charts_Prefix = Demos_Prefix + "/charts"; + public const string Demos_BarChart_Documentation = Demos_Charts_Prefix + "/bar-chart"; + public const string Demos_DoughnutChart_Documentation = Demos_Charts_Prefix + "/doughnut-chart"; + public const string Demos_LineChart_Documentation = Demos_Charts_Prefix + "/line-chart"; + public const string Demos_PieChart_Documentation = Demos_Charts_Prefix + "/pie-chart"; + public const string Demos_PolarAreaChart_Documentation = Demos_Charts_Prefix + "/polar-area-chart"; + public const string Demos_RadarChart_Documentation = Demos_Charts_Prefix + "/radar-chart"; + public const string Demos_ScatterChart_Documentation = Demos_Charts_Prefix + "/scatter-chart"; + + // Services + 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"; + public const string Demos_ColorUtils_Documentation = Demos_Utils_Prefix + "/color-utility"; + + #endregion +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/Enums/LanguageCode.cs b/BlazorBootstrap.Demo.RCL/Enums/LanguageCode.cs similarity index 100% rename from BlazorBootstrap.Demo.RCL/Components/Shared/Enums/LanguageCode.cs rename to BlazorBootstrap.Demo.RCL/Enums/LanguageCode.cs diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/Extensions/EnumExtensions.cs b/BlazorBootstrap.Demo.RCL/Extensions/EnumExtensions.cs similarity index 100% rename from BlazorBootstrap.Demo.RCL/Components/Shared/Extensions/EnumExtensions.cs rename to BlazorBootstrap.Demo.RCL/Extensions/EnumExtensions.cs 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..cc8ff6d09 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..40a4ec141 100644 --- a/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor.cs +++ b/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor.cs @@ -2,26 +2,54 @@ public partial class ThemeSwitcher : BlazorBootstrapComponentBase { + #region Fields and Constants + + private DotNetObjectReference? objRef; + + #endregion + #region Methods 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(); + protected override Task OnInitializedAsync() + { + objRef ??= DotNetObjectReference.Create(this); - internal Task SetDarkTheme() => ThemeSwitcherJsInterop.SetDarkThemeAsync(); + return base.OnInitializedAsync(); + } - internal Task SetLightTheme() => ThemeSwitcherJsInterop.SetLightThemeAsync(); + [JSInvokable] + public async Task OnThemeChangedJS(string themeName) + { + if (OnThemeChanged.HasDelegate) + await OnThemeChanged.InvokeAsync(themeName); + } + + internal Task SetAutoTheme() => ThemeSwitcherJsInterop.SetAutoThemeAsync(objRef); + + internal Task SetDarkTheme() => ThemeSwitcherJsInterop.SetDarkThemeAsync(objRef); + + internal Task SetLightTheme() => ThemeSwitcherJsInterop.SetLightThemeAsync(objRef); #endregion #region Properties, Indexers + protected override string? ClassNames => BuildClassNames(Class, (BootstrapClass.Dropdown, true)); + + /// + /// Fired when the theme is changed. + /// + [Parameter] + public EventCallback OnThemeChanged { get; set; } + [Inject] private ThemeSwitcherJsInterop ThemeSwitcherJsInterop { get; set; } = default!; #endregion 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