From f11d0aa6f3fe3c1e22cb36c40ef75edacad42c23 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Mon, 4 Nov 2024 23:08:58 +0530 Subject: [PATCH] Demo.RCL - Section component param updates --- .../Pages/Buttons/ButtonDocumentation.razor | 28 ++++++------- .../Pages/Callout/CalloutDocumentation.razor | 8 ++-- .../Pages/Card/CardDocumentation.razor | 28 ++++++------- .../Carousel/CarouselDocumentation.razor | 18 ++++----- .../BarCharts/BarChartDocumentation.razor | 12 +++--- .../Pages/Charts/ChartsDocumentation.razor | 6 +-- .../DoughnutChartDocumentation.razor | 6 +-- .../LineCharts/LineChartDocumentation.razor | 14 +++---- .../PieCharts/PieChartDocumentation.razor | 8 ++-- .../PolarAreaChartDocumentation.razor | 4 +- .../RadarCharts/RadarChartDocumentation.razor | 4 +- .../ScatterChartDocumentation.razor | 6 +-- .../Collapse/CollapseDocumentation.razor | 8 ++-- .../ConfirmDialogDocumentation.razor | 14 +++---- .../Dropdowns/DropdownDocumentation.razor | 40 +++++++++---------- .../AutoCompleteDocumentation.razor | 16 ++++---- .../CurrencyInputDocumentation.razor | 26 ++++++------ .../DateInput/DateInputDocumentation.razor | 14 +++---- .../NumberInputDocumentation.razor | 18 ++++----- .../RangeInput/RangeInputDocumentation.razor | 12 +++--- .../Form/Switch/SwitchDocumentation.razor | 10 ++--- .../TimeInput/TimeInputDocumentation.razor | 14 +++---- .../GettingStartedDocumentation.razor | 2 +- .../Grid_Overview_Documentation.razor | 4 +- .../Grid_DataBinding_Documentation.razor | 4 +- .../Grid_Filters_Documentation.razor | 14 +++---- .../04-paging/Grid_Paging_Documentation.razor | 8 ++-- .../Grid_Sorting_Documentation.razor | 6 +-- .../Grid_Selection_Documentation.razor | 8 ++-- .../Grid_Alignment_Documentation.razor | 4 +- .../Grid_GridSettings_Documentation.razor | 2 +- .../Grid_CustomCSSClass_Documentation.razor | 10 ++--- .../10-events/Grid_Events_Documentation.razor | 4 +- .../Grid_Translations_Documentation.razor | 2 +- .../Grid_FixedHeader_Documentation.razor | 4 +- .../Grid_FreezeColumns_Documentation.razor | 6 +-- .../Grid_DetailView_Documentation.razor | 4 +- .../Grid_Nested_Documentation.razor | 2 +- .../99-other/Grid_Other_Documentation.razor | 10 ++--- .../Pages/Icons/IconDocumentation.razor | 24 +++++------ .../Pages/Images/ImageDocumentation.razor | 6 +-- .../server/LayoutServerDocumentation.razor | 4 +- .../LayoutWebAssemblyDocumentation.razor | 4 +- .../Pages/Maps/GoogleMapDocumentation.razor | 26 ++++++------ .../Markdown/MarkdownDocumentation.razor | 30 +++++++------- .../Pages/Modal/ModalDocumentation.razor | 18 ++++----- .../Offcanvas/OffcanvasDocumentation.razor | 14 +++---- .../Pagination/PaginationDocumentation.razor | 12 +++--- .../PdfViewer/PdfViewerDocumentation.razor | 6 +-- .../PlaceholderDocumentation.razor | 12 +++--- .../Pages/Preload/PreloadDocumentation.razor | 8 ++-- .../Progress/ProgressDocumentation.razor | 20 +++++----- .../Pages/Ribbon/RibbonDocumentation.razor | 4 +- .../ScriptLoaderDocumentation.razor | 4 +- .../ModalServiceDocumentation.razor | 14 +++---- .../Pages/Sidebar/SidebarDocumentation.razor | 22 +++++----- .../Sidebar2/Sidebar2Documentation.razor | 14 +++---- .../SortableListDocumentation.razor | 20 +++++----- .../Spinners/SpinnersDocumentation.razor | 24 +++++------ .../Pages/Tabs/TabsDocumentation.razor | 32 +++++++-------- .../Pages/Toasts/ToastsDocumentation.razor | 16 ++++---- .../Tooltips/TooltipsDocumentation.razor | 16 ++++---- .../ColorUtil/ColorUtilDocumentation.razor | 4 +- 63 files changed, 381 insertions(+), 381 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor index 97a373ad..0ac15eb2 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor @@ -11,16 +11,16 @@ -
+
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
-
+
-
+
@@ -28,14 +28,14 @@
-
+
Fancy larger or smaller buttons? Add Size="ButtonSize.Large" or Size="ButtonSize.Small" for additional sizes.
-
+
Make buttons look inactive by adding the Disabled="true" boolean parameter to any Button component. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering.
@@ -46,43 +46,43 @@
-
+
-
+
-
+
-
+
Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
-
+
-
+
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
-
+
-
+
Blazor Bootstrap includes several predefined tooltip styles, each serving its own semantic purpose. The TooltipColor parameter can be used to customize the color of the tooltip. @@ -94,7 +94,7 @@
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor index 8f283365..61564e38 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor @@ -11,19 +11,19 @@ -
+
-
+
-
+
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor index 07b8422a..1537aeab 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor @@ -11,13 +11,13 @@ -
+
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
-
+
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. @@ -25,36 +25,36 @@
-
+
Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.
-
+
The building block of a card is the CardBody. Use it whenever you need a padded section within a card.
-
+
-
+
-
+
Create lists of content in a card with a flush list group.
-
+
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. @@ -62,14 +62,14 @@
-
+
Add an optional header and/or footer within a card.
-
+
Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities. @@ -77,18 +77,18 @@
-
+
You can quickly change the text alignment of any card—in its entirety or specific parts—with our TextAlignment parameter.
-
+
-
+
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint. @@ -96,7 +96,7 @@
-
+
When using card groups with footers, their content will automatically line up.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor index 30348bc5..ec55ccdc 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor @@ -11,12 +11,12 @@ -
+
Here is a basic example of a carousel with three slides.
-
+
You can add indicators to the carousel, alongside the previous/next controls. The indicators allow users to jump directly to a particular slide. @@ -25,7 +25,7 @@
-
+
You can add captions to your slides with the CarouselCaption component within any CarouselItem. They can be easily hidden on smaller viewports. @@ -33,14 +33,14 @@
-
+
To animate slides with a fading transition instead of sliding, set Crossfade to true.
-
+
You can make your carousels autoplay on page load by setting the Autoplay parameter to CarouselAutoPlay.StartOnPageLoad. Autoplaying carousels automatically pause while hovered with the mouse. @@ -53,21 +53,21 @@
-
+
Add Interval parameter to a CarouselItem component to change the amount of time to delay between automatically cycling to the next item.
-
+
Hide the controls by setting ShowPreviousNextControls parameter to false.
-
+
Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled by setting the Touch option to false. @@ -75,7 +75,7 @@
-
+
Blazor Bootstrap Carousel component exposes a two events for hooking into Carousel functionality. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor index 839a9c0c..45adfccd 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor @@ -11,12 +11,12 @@ -
+
Refer to the getting started guide for setting up charts.
-
+
In the following example, a categorical 12-color palette is used.
@@ -26,20 +26,20 @@ -
+
-
+
-
+
By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE).
-
+
@code { diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor index fe5ec01f..211eb96f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor @@ -11,11 +11,11 @@ -
+
-
+
At this moment we are supporting seven blazor chart types.
  1. Bar Chart
    2. @@ -32,7 +32,7 @@
-
+
Refer to the getting started guide for setting up charts.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor index fe4e26d8..9b8b9897 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor @@ -11,13 +11,13 @@ -
+
Refer to the getting started guide for setting up charts.
-
+
In the following example, a categorical 12-color palette is used.
@@ -28,7 +28,7 @@
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor index 5071e7da..441b7f08 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor @@ -11,13 +11,13 @@ -
+
Refer to the getting started guide for setting up charts.
-
+
In the following example, a categorical 12-color palette is used.
@@ -30,7 +30,7 @@
-
+
By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE). @@ -38,19 +38,19 @@
-
+
-
+
-
+
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor index d082307b..3434be29 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor @@ -11,13 +11,13 @@ -
+
Refer to the getting started guide for setting up charts.
-
+
In the following example, a categorical 12-color palette is used.
@@ -28,11 +28,11 @@
-
+
-
+
This sample demonstrates how to change the position of the chart legend.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor index ee00dea8..99f094b0 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor @@ -11,13 +11,13 @@ -
+
Refer to the getting started guide for setting up charts.
-
+
In the following example, a categorical 12-color palette is used.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor index 55e7d6fb..fd7c9fc7 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor @@ -11,13 +11,13 @@ -
+
Refer to the getting started guide for setting up charts.
-
+
In the following example, a categorical 12-color palette is used.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor index 52635f66..5dd3dbe7 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor @@ -11,13 +11,13 @@ -
+
Refer to the getting started guide for setting up charts.
-
+
In the following example, a categorical 12-color palette is used.
@@ -28,7 +28,7 @@
-
+
In the following example, you can randomize the data and datasets dynamically. Along with this, the ScatterChartOptions are updated. With these changes, the scatter chart is responsive, and when hovered over, the points' radius increases for better visibility to the end-user. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor index 95307532..f1aaa1d5 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor @@ -11,7 +11,7 @@ -
+
The Collapse component is used to show and hide content. Use ShowAsync, HideAsync, and ToggleAsync methods to toggle the content. Collapsing an element will animate the height from its current value to 0. @@ -23,21 +23,21 @@
-
+
Click the buttons below to show and hide the content.
-
+
The Collapse component supports horizontal collapsing. Set the Horizontal parameter to true to enable horizontal collapsing.
-
+
Blazor Bootstrap Collapse component exposes a few events for hooking into collapse functionality.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor index b3883b23..6b967413 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor @@ -11,12 +11,12 @@ -
+
-
+
Render different components dynamically within the confirm dialog without iterating through possible types or using conditional logic.
@@ -31,21 +31,21 @@
-
+
Use ConfirmDialogOptions to change the text and color of the button.
-
+
Confirm dialog have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
-
+
When dialogs become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
@@ -54,7 +54,7 @@
-
+
Add DialogOptions.IsVerticallyCentered="true" to vertically center the confirm dialog.
@@ -63,7 +63,7 @@
-
+
By default, auto focus on the "Yes" button is enabled. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor index e9789673..af7d67f0 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor @@ -11,55 +11,55 @@ -
+
-
+
-
+
-
+
-
-
+
+
To trigger DropdownMenu above elements, add the Direction="DropdownDirection.Dropup" to the Dropdown component.
-
+
To center the DropdownMenu above the toggle, add the Direction="DropdownDirection.DropupCentered" to the Dropdown component.
-
+
To trigger DropdownMenu at the right of elements, add the Direction="DropdownDirection.Dropend" to the Dropdown component.
-
+
To trigger DropdownMenu at the left of elements, you can add the Direction="DropdownDirection.Dropstart" to the Dropdown component.
-
+
To style DropdownItem as active, add the Active="true" parameter to the DropdownItem element in the DropdownMenu.
-
+
To disable the dropdown, set the Disabled parameter to true on the Dropdown component.
@@ -70,7 +70,7 @@
-
+

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

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

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

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

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

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

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

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

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

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

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

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

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