diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor index 70b8fea47..97a373ad4 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor @@ -11,16 +11,16 @@ -
+
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
-
+
-
+
@@ -28,14 +28,14 @@
-
+
Fancy larger or smaller buttons? Add Size="ButtonSize.Large" or Size="ButtonSize.Small" for additional sizes.
-
+
Make buttons look inactive by adding the Disabled="true" boolean parameter to any Button component. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering.
@@ -46,43 +46,43 @@
-
+
-
+
-
+
-
+
Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
-
+
-
+
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
-
+
-
+
Blazor Bootstrap includes several predefined tooltip styles, each serving its own semantic purpose. The TooltipColor parameter can be used to customize the color of the tooltip. @@ -94,7 +94,7 @@
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor index aca503ca1..8f2833659 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor @@ -11,19 +11,19 @@ -
+
-
+
-
+
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor index 0c965be1d..07b8422a3 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor @@ -11,13 +11,13 @@ -
+
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
-
+
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. @@ -25,36 +25,36 @@
-
+
Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.
-
+
The building block of a card is the CardBody. Use it whenever you need a padded section within a card.
-
+
-
+
-
+
Create lists of content in a card with a flush list group.
-
+
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card. @@ -62,14 +62,14 @@
-
+
Add an optional header and/or footer within a card.
-
+
Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities. @@ -77,18 +77,18 @@
-
+
You can quickly change the text alignment of any card—in its entirety or specific parts—with our TextAlignment parameter.
-
+
-
+
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint. @@ -96,7 +96,7 @@
-
+
When using card groups with footers, their content will automatically line up.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor index a4a401396..30348bc59 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor @@ -11,12 +11,12 @@ -
+
Here is a basic example of a carousel with three slides.
-
+
You can add indicators to the carousel, alongside the previous/next controls. The indicators allow users to jump directly to a particular slide. @@ -25,7 +25,7 @@
-
+
You can add captions to your slides with the CarouselCaption component within any CarouselItem. They can be easily hidden on smaller viewports. @@ -33,14 +33,14 @@
-
+
To animate slides with a fading transition instead of sliding, set Crossfade to true.
-
+
You can make your carousels autoplay on page load by setting the Autoplay parameter to CarouselAutoPlay.StartOnPageLoad. Autoplaying carousels automatically pause while hovered with the mouse. @@ -53,21 +53,21 @@
-
+
Add Interval parameter to a CarouselItem component to change the amount of time to delay between automatically cycling to the next item.
-
+
Hide the controls by setting ShowPreviousNextControls parameter to false.
-
+
Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled by setting the Touch option to false. @@ -75,7 +75,7 @@
-
+
Blazor Bootstrap Carousel component exposes a two events for hooking into Carousel functionality. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor index 473156efa..839a9c0c9 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor @@ -11,12 +11,12 @@ -
+
Refer to the getting started guide for setting up charts.
-
+
In the following example, a categorical 12-color palette is used.
@@ -26,20 +26,20 @@ -
+
-
+
-
+
By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE).
-
+
@code { diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor index cddc32ab5..fe5ec01f6 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor @@ -11,11 +11,11 @@ -
+
-
+
At this moment we are supporting seven blazor chart types.
  1. Bar Chart
    2. @@ -32,7 +32,7 @@
-
+
Refer to the getting started guide for setting up charts.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor index b1578587d..fe4e26d87 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor @@ -11,13 +11,13 @@ -
+
Refer to the getting started guide for setting up charts.
-
+
In the following example, a categorical 12-color palette is used.
@@ -28,7 +28,7 @@
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor index 58310b6d7..5071e7dad 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor @@ -11,13 +11,13 @@ -
+
Refer to the getting started guide for setting up charts.
-
+
In the following example, a categorical 12-color palette is used.
@@ -30,7 +30,7 @@
-
+
By default, the chart is using the default locale of the platform on which it is running. In the following example, you will see the chart in the German locale (de_DE). @@ -38,19 +38,19 @@
-
+
-
+
-
+
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor index 997e395bb..d082307bd 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor @@ -11,13 +11,13 @@ -
+
Refer to the getting started guide for setting up charts.
-
+
In the following example, a categorical 12-color palette is used.
@@ -28,11 +28,11 @@
-
+
-
+
This sample demonstrates how to change the position of the chart legend.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor index 933bbef86..953075322 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/CollapseDocumentation.razor @@ -11,7 +11,7 @@ -
+
The Collapse component is used to show and hide content. Use ShowAsync, HideAsync, and ToggleAsync methods to toggle the content. Collapsing an element will animate the height from its current value to 0. @@ -23,21 +23,21 @@
-
+
Click the buttons below to show and hide the content.
-
+
The Collapse component supports horizontal collapsing. Set the Horizontal parameter to true to enable horizontal collapsing.
-
+
Blazor Bootstrap Collapse component exposes a few events for hooking into collapse functionality.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor index 1156663f5..b3883b230 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor @@ -11,12 +11,12 @@ -
+
-
+
Render different components dynamically within the confirm dialog without iterating through possible types or using conditional logic.
@@ -31,21 +31,21 @@
-
+
Use ConfirmDialogOptions to change the text and color of the button.
-
+
Confirm dialog have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
-
+
When dialogs become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
@@ -54,7 +54,7 @@
-
+
Add DialogOptions.IsVerticallyCentered="true" to vertically center the confirm dialog.
@@ -63,7 +63,7 @@
-
+
By default, auto focus on the "Yes" button is enabled. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor index 61d3dd60c..e97896731 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor @@ -11,55 +11,55 @@ -
+
-
+
-
+
-
+
-
-
+
+
To trigger DropdownMenu above elements, add the Direction="DropdownDirection.Dropup" to the Dropdown component.
-
+
To center the DropdownMenu above the toggle, add the Direction="DropdownDirection.DropupCentered" to the Dropdown component.
-
+
To trigger DropdownMenu at the right of elements, add the Direction="DropdownDirection.Dropend" to the Dropdown component.
-
+
To trigger DropdownMenu at the left of elements, you can add the Direction="DropdownDirection.Dropstart" to the Dropdown component.
-
+
To style DropdownItem as active, add the Active="true" parameter to the DropdownItem element in the DropdownMenu.
-
+
To disable the dropdown, set the Disabled parameter to true on the Dropdown component.
@@ -70,7 +70,7 @@
-
+

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

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

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

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

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

+
For filtering, AllowFiltering and PropertyName parameters are required.
Add AllowFiltering="true" parameter to Grid and PropertyName parameter to all the GridColumns.
-
+
In the below example, StringComparision.Ordinal is used on the Employee Name column to make the filter case-sensitive.
By default, StringComparison.OrdinalIgnoreCase is used to compare culture-agnostic and case-insensitive string matching.
@@ -25,7 +25,7 @@
-
+
FilterOperator and FilterValue parameters are required to set the default filter.
@@ -34,14 +34,14 @@
-
+
Filterable parameter is required to disable the filter on a specific column. Add Filterable="false" parameter to GridColumn. The column filter is disabled on the Id column in the below example.
-
+
Add FilterTextboxWidth parameter to the GridColumn to increase or decrease the filter textbox width, FilterTextboxWidth parameter is optional.
Filter textbox width measured in pixels. @@ -57,11 +57,11 @@
-
+
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor index aab3b56cf..42d20cb9f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor @@ -11,24 +11,24 @@ -
+
For paging, AllowPaging and PageSize parameters are required.
Add AllowPaging="true" and PageSize="20" parameters to the Grid. PageSize parameter is optional.
The default page size is 10.
-
+
-
+
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor index 6ec99e9d6..4c2772613 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor @@ -11,13 +11,13 @@ -
+
For sorting, AllowSorting and SortKeySelector parameters are required.
Add AllowSorting="true" parameter to Grid and SortKeySelector to all the GridColumns.
-
+
IsDefaultSortColumn parameter is required to set the default sorting. Add IsDefaultSortColumn="true" parameter to the GridColumn.
The default sort direction will be ascending. To change the default sorting of a column, add SortDirection="SortDirection.Descending" to the GridColumn.
If more than one GridColumn has the IsDefaultSortColumn paramter, it will pick the first column as the default sorting column. @@ -25,7 +25,7 @@
-
+
Add Sortable="false"parameter the GridColumn to disable the sorting. If sorting is disabled, then the SortKeySelector parameter is not required. The sorting is disabled on the Designation column in the below example.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor index 94f4be137..0b892f6af 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor @@ -11,7 +11,7 @@ -
+
Set AllowSelection="true" to enable the selection on the Grid. By default, SelectionMode is Single. @@ -19,7 +19,7 @@
-
+
To select multiple rows, set SelectionMode="GridSelectionMode.Multiple".
@@ -29,7 +29,7 @@
-
+
We can disable the header checkbox or row level checkbox based on a condition. For this, we have DisableAllRowsSelection and DisableRowSelection delegate parameters. In the below example, we disabled the header checkbox if any of the employee Id is less than 105. @@ -38,7 +38,7 @@
-
+
These CSS variables are used to set the default colors and background color of a row when it's selected. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor index 31f9bf294..5d07f7259 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor @@ -11,12 +11,12 @@ -
+
Use the HeaderTextAlignment parameter to change the header column alignment. By default, HeaderTextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End.
-
+
Use the TextAlignment parameter to change the cell data alignment. By default, TextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor index 0a1051c2c..5f2c748db 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor @@ -11,7 +11,7 @@ -
+
This example shows how to save/load the Grid state. The state includes the page number, page size, and filters.
In version 0.5.1 and above, the Grid sorting state is not included as part of GridSettings. We will add it in the subsequent releases. Browser local storage is used to persist the Grid state. Common locations exist for persisting state are Server-side storage, URL, Browser storage, and In-memory state container service. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor index 7a91ee84d..021c1487d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor @@ -11,27 +11,27 @@ -
+
In the below example, we applied table-danger CSS class to the row where the employee is inactive and the table-success CSS class to the row where the employee designation is Architect.
-
+
In the below example, we applied table-danger CSS class to the Active column where the employee is inactive and the table-success CSS class to the Active column where the employee is active.
-
+
In the following example, the Class parameter is used to apply the CSS class to an entire grid column, including the header.
-
+
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor index 2901b3000..c6741832f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor @@ -11,12 +11,12 @@ -
+
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor index c63ca34dd..c0b28627f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor @@ -11,7 +11,7 @@ -
+
In the example below, you will see translations related to pagination and filters in Dutch.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor index 954b39b5f..3a49a1792 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor @@ -11,7 +11,7 @@ -
+
To set the fixed header, set the FixedHeader parameter to true. The minimum height of the grid is 320 pixels. You can change the units to em, pt, px, or etc. by setting the Unit parameter. @@ -19,7 +19,7 @@
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor index fc43af58e..1856302e8 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor @@ -11,16 +11,16 @@ -
+
-
+
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor index 9b01e9f23..9b621a49c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor @@ -11,12 +11,12 @@ -
+
To enable detail view, set the AllowDetailView parameter to true. In the following example, existing <GridColumn> tags are nested under <GridColumns> tag to distinguish them from <GridDetailView>.
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor index dda8e7cff..70dead2c6 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor @@ -11,7 +11,7 @@ -
+
To create a nested grid, we first need to enable the detail view. To enable the detail view, set the AllowDetailView parameter to true. In the following example, existing <GridColumn> tags are nested under <GridColumns> tag to distinguish them from <GridDetailView>.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor index 9c43425fe..a8d4e919b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor @@ -11,28 +11,28 @@ -
+
To format the cell data, use ToString method and format strings. Refer: How to format numbers, dates, enums, and other types in .NET
Example: @@context.Salary.ToString("N2").
-
+
To prevent text from wrapping, add TextNoWrap="true" to the GridColumn.
-
+
If there are no records to display in the Grid, by default, it will display the No records to display message. You can change this message by adding the EmptyText parameter to the Grid.
-
+
Set the GridEmptyDataTemplate to customize the message displayed when the grid has no records.
-
+
In the below example, we use <HeaderContent> and <ChildContent> tags to define custom column header and cell content. When defining header content, filters and sorting are removed from column.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor index b22db5e48..b666153e3 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Icons/IconDocumentation.razor @@ -11,57 +11,57 @@ -
+
-
+
-
+
In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website.
-
+
-
+
-
+
-
+
-
+
-
+
-
+
In the following example, we used Font Awesome 6.4.2 free version icons. For Font Awesome setup, please follow the Font Awesome website.
-
+
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor index 53d2de8ee..5d516acc5 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Images/ImageDocumentation.razor @@ -11,21 +11,21 @@ -
+
By default images are responsive. The default value of the IsResponsive parameter is true.
-
+
To set the image to have a rounded 1px border appearance, set the IsThumbnail parameter to true.
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor index 31fa61f85..7231cc5da 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor @@ -11,7 +11,7 @@ -
+
Assuming you followed the getting started docs for the initial setup.
    @@ -21,7 +21,7 @@
-
+
1. Replace MainLayout.razor page code with the below code.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor index 88ea87c90..0a73b4425 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor @@ -11,7 +11,7 @@ -
+
Assuming you followed the getting started docs for the initial setup.
    @@ -21,7 +21,7 @@
-
+
1. Replace MainLayout.razor page code with the below code.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor index 7368c939c..d936d7a75 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Maps/GoogleMapDocumentation.razor @@ -11,7 +11,7 @@ -
+
Before you start using the GoogleMap component in your project, you need an API key. Please follow the link below for detailed steps. @@ -19,47 +19,47 @@
-
+
This example demonstrates how to use a simple Google Map component.
-
+
This example demonstrates how to use a simple Google Map component with marker.
-
-
+
+
To scale a marker, use the PinElement.Scale option.
-
+
Use the PinElement.Background option to change the background color of a marker.
-
+
Use the PinElement.BorderColor option to change the border color of a marker.
-
+
Use the PinElement.GlyphColor option to change the glyph color of a marker.
-
+
Set the PinElement.Glyph option to an empty string to hide a marker's glyph.
-
+
Use the PinElement.UseIconFonts and PinElement.Glyph options to use the icon fonts.
-
+
-
+
This example shows you how to make markers respond to click events. To make a marker clickable: Set the Clickable parameter to true. @@ -67,7 +67,7 @@
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor index 1b05c4f1d..050b86f4a 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor @@ -11,40 +11,40 @@ -
+
-
+
Use headers to structure your content. Start a line with # for a heading. Add more # characters for subheadings, up to six levels.
-
+
Break your text into paragraphs or line breaks for easier reading.
-
+
Quote text with > before it. Use more > characters to nest quotes. For blocks of text, use > at the start of each line.
-
+
Add a horizontal rule with a line of ---.
-
+
Emphasize text with bold, italics, or strikethrough:
    @@ -57,12 +57,12 @@
-
+
-
+
Tables help organize structured data.
    @@ -77,7 +77,7 @@
-
+
Use lists to organize related items:
    @@ -88,17 +88,17 @@
-
+
-
+
-
+
@@ -107,17 +107,17 @@
-
+
-
+
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor index 9e7f49694..028932048 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Modal/ModalDocumentation.razor @@ -11,11 +11,11 @@ -
+
-
+
Render different components dynamically within the modal without iterating through possible types or using conditional logic.
If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. @@ -25,7 +25,7 @@
-
+
Event callbacks (EventCallback) can be passed in its parameter dictionary.
In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. @@ -40,12 +40,12 @@
-
+
When UseStaticBackdrop is set to true, the modal will not close when clicking outside it. Click the button below to try it.
-
+
When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
@@ -53,22 +53,22 @@
-
+
Add IsVerticallyCentered="true" to vertically center the modal.
-
+
Modals have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
-
+
-
+
Blazor Bootstrap modal class exposes a few events for hooking into modal functionality.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor index d8e246381..d54acfa9e 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Offcanvas/OffcanvasDocumentation.razor @@ -13,11 +13,11 @@ Similar to modals, only one offcanvas can be shown at a time. -
+
-
+
Render different components dynamically within the offcanvas without iterating through possible types or using conditional logic.
If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value. @@ -27,7 +27,7 @@
-
+
Event callbacks (EventCallback) can be passed in its parameter dictionary.
In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. @@ -42,25 +42,25 @@
-
+
Try the top, bottom, and left examples out below.
Default placement for the offcanvas component is right. -
+
When UseStaticBackdrop is set to true, the offcanvas will not close when clicking outside of it.
-
+
Set the size of the Offcanvas with the Size parameter. The default value is OffcanvasSize.Regular.
-
+
Blazor Bootstrap offcanvas component exposes a few events for hooking into offcanvas functionality.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor index 60f8627c5..7690928eb 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Pagination/PaginationDocumentation.razor @@ -11,29 +11,29 @@ -
+
We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links.
-
+
-
+
-
+
Fancy larger or smaller pagination? Add Size="PaginationSize.Small" or Size="PaginationSize.Large" for additional sizes.
-
+
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor index 3c73080aa..e9c227cb2 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/PdfViewer/PdfViewerDocumentation.razor @@ -11,18 +11,18 @@ -
+
-
+
Set the Orientation parameter to Orientation.Landscape to change the default orientation from Portrait to Landscape.
-
+
PDF Viewer component supports base64 string as a URL.
Url="@@string.Format("data:application/pdf;base64,{0}", pdfBase64String)" diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor index f7afe52ee..4ab73d463 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Services/ModalService/ModalServiceDocumentation.razor @@ -13,31 +13,31 @@ -
+
-
+
-
+
-
+
-
+
-
+
-
+
1. Add the Modal component in MainLayout.razor page as shown below.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor index 241a54913..569c6f7ab 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Utils/ColorUtil/ColorUtilDocumentation.razor @@ -11,13 +11,13 @@ -
+
-
+