- Swapping to the Development environment displays detailed information about the error that occurred.
-
-
- The Development environment shouldn't be enabled for deployed applications.
- It can result in displaying sensitive information from exceptions to end users.
- For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development
- and restarting the app.
-
-
- For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette.
- These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
-
-
-
-
-
-
-
-
-
-
-
- By default, the chart is using the default locale of the platform on which it is running.
- In the following example, you will see the chart in the German locale (de_DE).
-
-
-
-
-
-
-@code {
- private const string pageUrl = RouteConstants.Demos_BarChart_Documentation;
- private const string pageTitle = "Blazor Bar Chart";
- private const string pageDescription = "A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.";
- private const string metaTitle = "Blazor Bar Chart Component";
- private const string metaDescription = "A Blazor Bootstrap bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.";
- private const string imageUrl = "https://i.imgur.com/IX3bajc.png";
-}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor
deleted file mode 100644
index 211eb96f0..000000000
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor
+++ /dev/null
@@ -1,48 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
- @pageDescription
-
-
-
-
-
-
-
-
-
-
At this moment we are supporting seven blazor chart types.
-
-
-@code {
- private const string pageUrl = RouteConstants.Demos_Charts_Documentation;
- private const string pageTitle = "Blazor Charts";
- private const string pageDescription = "Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly.";
- private const string metaTitle = "Blazor Chart Components";
- private const string metaDescription = "Blazor Bootstrap charts are well-designed chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly.";
- private const string imageUrl = "https://i.imgur.com/IX3bajc.png";
-}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor
deleted file mode 100644
index 9b8b9897d..000000000
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor
+++ /dev/null
@@ -1,42 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
- @pageDescription
-
-
-
-
-
-
-
- For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette.
- These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
-
-
-
-
-
-
-
-
-@code {
- private const string pageUrl = RouteConstants.Demos_DoughnutChart_Documentation;
- private const string pageTitle = "Blazor Doughnut Chart";
- private const string pageDescription = "A Blazor donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category.";
- private const string metaTitle = "Blazor Doughnut Chart Component";
- private const string metaDescription = "A Blazor donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category.";
- private const string imageUrl = "https://i.imgur.com/xEPhAsW.png";
-}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor
deleted file mode 100644
index 441b7f087..000000000
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor
+++ /dev/null
@@ -1,64 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
- @pageDescription
-
-
-
-
-
-
-
- For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette.
- These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
-
-
-
-
-
-
-
-
- By default, the chart is using the default locale of the platform on which it is running.
- In the following example, you will see the chart in the German locale (de_DE).
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code {
- private const string pageUrl = RouteConstants.Demos_LineChart_Documentation;
- private const string pageTitle = "Blazor Line Chart";
- private const string pageDescription = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
- private const string metaTitle = "Blazor Line Chart Component";
- private const string metaDescription = "A Blazor Bootstrap line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
- private const string imageUrl = "https://i.imgur.com/8b7jH0D.png";
-}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor
deleted file mode 100644
index 14917b9ef..000000000
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor
+++ /dev/null
@@ -1,38 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
- @pageDescription
-
-
-
-
-
-
-
- For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette.
- These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
-
-
-
-
-@code {
- private const string pageUrl = RouteConstants.Demos_PolarAreaChart_Documentation;
- private const string pageTitle = "Blazor Polar Area Chart";
- private const string pageDescription = "A Blazor Bootstrap polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.";
- private const string metaTitle = "Blazor Polar Area Chart Component";
- private const string metaDescription = "A Blazor Bootstrap polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.";
- private const string imageUrl = "https://i.imgur.com/xLAqwGi.png";
-}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor
deleted file mode 100644
index c6e1abec6..000000000
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor
+++ /dev/null
@@ -1,38 +0,0 @@
-@attribute [Route(pageUrl)]
-
-
-
-
- @pageDescription
-
-
-
-
-
-
-
- For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette.
- These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
-
-
-
-
-@code {
- private const string pageUrl = RouteConstants.Demos_RadarChart_Documentation;
- private const string pageTitle = "Blazor Radar Chart";
- private const string pageDescription = "A Blazor Bootstrap radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.";
- private const string metaTitle = "Blazor Radar Chart Component";
- private const string metaDescription = "A Blazor Bootstrap radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.";
- private const string imageUrl = "https://i.imgur.com/Urrb79M.png";
-}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/AccordionDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/AccordionDocumentation.razor
similarity index 93%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/AccordionDocumentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/AccordionDocumentation.razor
index 2aa5f2dea..aadbb8f41 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/AccordionDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/AccordionDocumentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
@@ -113,7 +112,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Accordion_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Accordion;
private const string pageTitle = "Blazor Accordion";
private const string pageDescription = "Build vertically collapsing accordions in combination with our Collapse component.";
private const string metaTitle = "Blazor Accordion Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/Accordion_Demo_01_Examples.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_01_Examples.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/Accordion_Demo_01_Examples.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_02_Title_with_Icon.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/Accordion_Demo_02_Title_with_Icon.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_02_Title_with_Icon.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/Accordion_Demo_02_Title_with_Icon.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_03_Flush.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/Accordion_Demo_03_Flush.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_03_Flush.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/Accordion_Demo_03_Flush.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_04_Set_Default_Active.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/Accordion_Demo_04_Set_Default_Active.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_04_Set_Default_Active.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/Accordion_Demo_04_Set_Default_Active.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_05_Always_Open.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/Accordion_Demo_05_Always_Open.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_05_Always_Open.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/Accordion_Demo_05_Always_Open.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_06_Show_Hide_Individual_AccordionItems.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/Accordion_Demo_06_Show_Hide_Individual_AccordionItems.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_06_Show_Hide_Individual_AccordionItems.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/Accordion_Demo_06_Show_Hide_Individual_AccordionItems.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_07_Show_Hide_All_AccordionItems.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/Accordion_Demo_07_Show_Hide_All_AccordionItems.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_07_Show_Hide_All_AccordionItems.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/Accordion_Demo_07_Show_Hide_All_AccordionItems.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_08_Events.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/Accordion_Demo_08_Events.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_08_Events.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Accordion/Accordion_Demo_08_Events.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/AlertDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Alerts/AlertDocumentation.razor
similarity index 86%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/AlertDocumentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Alerts/AlertDocumentation.razor
index d49284a36..cd5bfcdcd 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/AlertDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Alerts/AlertDocumentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.
@@ -48,8 +47,8 @@
-@code{
- private const string pageUrl = RouteConstants.Demos_Alerts_Documentation;
+@code {
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Alerts;
private const string pageTitle = "Blazor Alert";
private const string pageDescription = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages.";
private const string metaTitle = "Blazor Alert Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/Alert_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Alerts/Alert_Demo_01_Examples.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/Alert_Demo_01_Examples.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Alerts/Alert_Demo_01_Examples.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/Alert_Demo_02_Link_Color.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Alerts/Alert_Demo_02_Link_Color.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/Alert_Demo_02_Link_Color.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Alerts/Alert_Demo_02_Link_Color.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/Alert_Demo_03_Additional_Content.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Alerts/Alert_Demo_03_Additional_Content.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/Alert_Demo_03_Additional_Content.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Alerts/Alert_Demo_03_Additional_Content.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/Alert_Demo_04_Icons.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Alerts/Alert_Demo_04_Icons.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/Alert_Demo_04_Icons.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Alerts/Alert_Demo_04_Icons.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/Alert_Demo_05_Dismissing_A.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Alerts/Alert_Demo_05_Dismissing_A.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/Alert_Demo_05_Dismissing_A.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Alerts/Alert_Demo_05_Dismissing_A.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/Alert_Demo_05_Dismissing_B.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Alerts/Alert_Demo_05_Dismissing_B.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/Alert_Demo_05_Dismissing_B.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Alerts/Alert_Demo_05_Dismissing_B.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/Alert_Demo_06_Switch_Alert_Type_Dynamically.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Alerts/Alert_Demo_06_Switch_Alert_Type_Dynamically.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/Alert_Demo_06_Switch_Alert_Type_Dynamically.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Alerts/Alert_Demo_06_Switch_Alert_Type_Dynamically.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Badge/BadgeDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Badge/BadgeDocumentation.razor
similarity index 88%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Badge/BadgeDocumentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Badge/BadgeDocumentation.razor
index 1ac1ad314..0ca090336 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Badge/BadgeDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Badge/BadgeDocumentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
@@ -61,7 +60,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Badge_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Badge;
private const string pageTitle = "Blazor Badge";
private const string pageDescription = "The Blazor Bootstrap Badge component shows the small count and labels.";
private const string metaTitle = "Blazor Badge Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Badge/Badge_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Badge/Badge_Demo_01_Examples.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Badge/Badge_Demo_01_Examples.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Badge/Badge_Demo_01_Examples.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Badge/Badge_Demo_02_Background_Colors.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Badge/Badge_Demo_02_Background_Colors.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Badge/Badge_Demo_02_Background_Colors.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Badge/Badge_Demo_02_Background_Colors.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Badge/Badge_Demo_03_Pill_Badges.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Badge/Badge_Demo_03_Pill_Badges.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Badge/Badge_Demo_03_Pill_Badges.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Badge/Badge_Demo_03_Pill_Badges.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Badge/Badge_Demo_04_Buttons.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Badge/Badge_Demo_04_Buttons.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Badge/Badge_Demo_04_Buttons.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Badge/Badge_Demo_04_Buttons.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Badge/Badge_Demo_05_Positioned.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Badge/Badge_Demo_05_Positioned.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Badge/Badge_Demo_05_Positioned.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Badge/Badge_Demo_05_Positioned.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Badge/Badge_Demo_06_Generic_Indicator.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Badge/Badge_Demo_06_Generic_Indicator.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Badge/Badge_Demo_06_Generic_Indicator.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Badge/Badge_Demo_06_Generic_Indicator.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Breadcrumb/BreadcrumbDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Breadcrumb/BreadcrumbDocumentation.razor
similarity index 69%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Breadcrumb/BreadcrumbDocumentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Breadcrumb/BreadcrumbDocumentation.razor
index 2afe81ab4..57e6073c2 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Breadcrumb/BreadcrumbDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Breadcrumb/BreadcrumbDocumentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
@@ -24,7 +23,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Breadcrumb_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Breadcrumb;
private const string pageTitle = "Blazor Breadcrumb";
private const string pageDescription = "Indicate the current page's location within a navigational hierarchy that automatically adds separators.";
private const string metaTitle = "Blazor Breadcrumb Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Breadcrumb/Breadcrumb_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Breadcrumb/Breadcrumb_Demo_01_Examples.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Breadcrumb/Breadcrumb_Demo_01_Examples.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Breadcrumb/Breadcrumb_Demo_01_Examples.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Breadcrumb/Breadcrumb_Demo_02_Dividers.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Breadcrumb/Breadcrumb_Demo_02_Dividers.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Breadcrumb/Breadcrumb_Demo_02_Dividers.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Breadcrumb/Breadcrumb_Demo_02_Dividers.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Breadcrumb/Breadcrumb_Demo_03_Embedded_SVG.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Breadcrumb/Breadcrumb_Demo_03_Embedded_SVG.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Breadcrumb/Breadcrumb_Demo_03_Embedded_SVG.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Breadcrumb/Breadcrumb_Demo_03_Embedded_SVG.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/ButtonDocumentation.razor
similarity index 92%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/ButtonDocumentation.razor
index 0ac15eb22..73558e068 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/ButtonDocumentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
@@ -101,7 +100,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Buttons_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Buttons;
private const string pageTitle = "Blazor Button";
private const string pageDescription = "Use Blazor Bootstrap button styles for actions in forms, dialogs, and more with support for multiple sizes, states, etc.";
private const string metaTitle = "Blazor Button Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_01_Examples.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_01_Examples.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_01_Examples.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_02_Button_Tags.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_02_Button_Tags.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_02_Button_Tags.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_02_Button_Tags.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_03_Outline_Buttons.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_03_Outline_Buttons.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_03_Outline_Buttons.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_03_Outline_Buttons.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_04_Sizes_A.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_04_Sizes_A.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_04_Sizes_A.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_04_Sizes_A.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_04_Sizes_B.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_04_Sizes_B.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_04_Sizes_B.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_04_Sizes_B.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_04_Sizes_C.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_04_Sizes_C.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_04_Sizes_C.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_04_Sizes_C.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_05_Disabled_State_A.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_05_Disabled_State_A.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_05_Disabled_State_A.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_05_Disabled_State_A.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_05_Disabled_State_B.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_05_Disabled_State_B.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_05_Disabled_State_B.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_05_Disabled_State_B.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_06_Block_Buttons_A.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_06_Block_Buttons_A.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_06_Block_Buttons_A.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_06_Block_Buttons_A.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_06_Block_Buttons_B.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_06_Block_Buttons_B.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_06_Block_Buttons_B.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_06_Block_Buttons_B.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_06_Block_Buttons_C.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_06_Block_Buttons_C.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_06_Block_Buttons_C.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_06_Block_Buttons_C.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_06_Block_Buttons_D.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_06_Block_Buttons_D.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_06_Block_Buttons_D.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_06_Block_Buttons_D.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_07_Toggle_States_A.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_07_Toggle_States_A.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_07_Toggle_States_A.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_07_Toggle_States_A.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_07_Toggle_States_B.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_07_Toggle_States_B.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_07_Toggle_States_B.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_07_Toggle_States_B.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_08_Loading_Spinner.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_08_Loading_Spinner.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_08_Loading_Spinner.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_08_Loading_Spinner.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_08_Show_Hide_Loading_Spinner.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_08_Show_Hide_Loading_Spinner.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_08_Show_Hide_Loading_Spinner.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_08_Show_Hide_Loading_Spinner.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_09_A_Show_Tooltip.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_09_A_Show_Tooltip.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_09_A_Show_Tooltip.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_09_A_Show_Tooltip.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_09_B_Dynamically_update_the_tooltip_text.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_09_B_Dynamically_update_the_tooltip_text.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_09_B_Dynamically_update_the_tooltip_text.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_09_B_Dynamically_update_the_tooltip_text.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_09_C_Tooltip_Color.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_09_C_Tooltip_Color.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_09_C_Tooltip_Color.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_09_C_Tooltip_Color.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_10_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_10_Click_Event.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_10_Click_Event.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_10_Click_Event.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_11_Double_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_11_Double_Click_Event.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_11_Double_Click_Event.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_11_Double_Click_Event.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_12_Click_Event_With_Args.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_12_Click_Event_With_Args.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_12_Click_Event_With_Args.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_12_Click_Event_With_Args.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_13_Disable_Enable_Dynamically.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_13_Disable_Enable_Dynamically.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/Button_Demo_13_Disable_Enable_Dynamically.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Buttons/Button_Demo_13_Disable_Enable_Dynamically.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Callout/CalloutDocumentation.razor
similarity index 72%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Callout/CalloutDocumentation.razor
index 61564e389..4710a88b5 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Callout/CalloutDocumentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
@@ -28,7 +27,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Callout_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Callout;
private const string pageTitle = "Blazor Callout";
private const string pageDescription = "Blazor Bootstrap callout component provides content presentation in a visually distinct manner.";
private const string metaTitle = "Blazor Callout Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/Callout_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Callout/Callout_Demo_01_Examples.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Callout/Callout_Demo_01_Examples.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Callout/Callout_Demo_01_Examples.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/Callout_Demo_02_Change_Heading.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Callout/Callout_Demo_02_Change_Heading.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Callout/Callout_Demo_02_Change_Heading.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Callout/Callout_Demo_02_Change_Heading.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/Callout_Demo_03_Large_Text.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Callout/Callout_Demo_03_Large_Text.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Callout/Callout_Demo_03_Large_Text.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Callout/Callout_Demo_03_Large_Text.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Callout/Callout_Demo_04_Hide_Heading.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Callout/Callout_Demo_04_Hide_Heading.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Callout/Callout_Demo_04_Hide_Heading.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Callout/Callout_Demo_04_Hide_Heading.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/CardDocumentation.razor
similarity index 91%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/CardDocumentation.razor
index 1537aeabf..9bdfd52f4 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/CardDocumentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
@@ -104,7 +103,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Card_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Card;
private const string pageTitle = "Blazor Card";
private const string pageDescription = "BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options.";
private const string metaTitle = "Blazor Card Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_01_Examples.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_01_Examples.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_01_Examples.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_02_Content_Types_Body.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_02_Content_Types_Body.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_02_Content_Types_Body.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_02_Content_Types_Body.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_03_Content_Types_Titles_Text_And_Links.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_03_Content_Types_Titles_Text_And_Links.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_03_Content_Types_Titles_Text_And_Links.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_03_Content_Types_Titles_Text_And_Links.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_04_Content_Types_Images.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_04_Content_Types_Images.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_04_Content_Types_Images.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_04_Content_Types_Images.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_05_Content_Types_List_Groups.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_05_Content_Types_List_Groups.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_05_Content_Types_List_Groups.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_05_Content_Types_List_Groups.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_06_Content_Types_Kitchen_Sink.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_06_Content_Types_Kitchen_Sink.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_06_Content_Types_Kitchen_Sink.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_06_Content_Types_Kitchen_Sink.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_07_Header_And_Footer.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_07_Header_And_Footer.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_07_Header_And_Footer.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_07_Header_And_Footer.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_08_Sizing.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_08_Sizing.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_08_Sizing.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_08_Sizing.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_09_Text_Alignment.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_09_Text_Alignment.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_09_Text_Alignment.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_09_Text_Alignment.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_10_Background_And_Color.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_10_Background_And_Color.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_10_Background_And_Color.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_10_Background_And_Color.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_11_Card_Groups.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_11_Card_Groups.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_11_Card_Groups.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_11_Card_Groups.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_12_Card_Groups_With_Footer.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_12_Card_Groups_With_Footer.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Card/Card_Demo_12_Card_Groups_With_Footer.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Card/Card_Demo_12_Card_Groups_With_Footer.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/CarouselDocumentation.razor
similarity index 91%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/CarouselDocumentation.razor
index ec55ccdce..54b8fa324 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/CarouselDocumentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
Here is a basic example of a carousel with three slides.
@@ -105,7 +104,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Carousel_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Carousel;
private const string pageTitle = "Blazor Carousel";
private const string pageDescription = "Blazor Carousel component is a slideshow component that cycles through elements, images, or slides of text.";
private const string metaTitle = "Blazor Carousel Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_01_Examples.razor
new file mode 100644
index 000000000..a5bd9c81b
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_01_Examples.razor
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_02_Indicators.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_02_Indicators.razor
new file mode 100644
index 000000000..dca44a406
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_02_Indicators.razor
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_03_Captions.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_03_Captions.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_03_Captions.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_03_Captions.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_04_Crossfade.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_04_Crossfade.razor
new file mode 100644
index 000000000..46324e7c2
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_04_Crossfade.razor
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_05_Autoplay_A_StartOnPageLoad.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_05_Autoplay_A_StartOnPageLoad.razor
new file mode 100644
index 000000000..bfbfac7e2
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_05_Autoplay_A_StartOnPageLoad.razor
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_05_Autoplay_B_StartAfterUserInteraction.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_05_Autoplay_B_StartAfterUserInteraction.razor
new file mode 100644
index 000000000..a134297d7
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_05_Autoplay_B_StartAfterUserInteraction.razor
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_06_Individual_Carouselitem_Interval.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_06_Individual_Carouselitem_Interval.razor
new file mode 100644
index 000000000..7dc7108d3
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_06_Individual_Carouselitem_Interval.razor
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_07_Autoplaying_Carousels_without_Controls.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_07_Autoplaying_Carousels_without_Controls.razor
new file mode 100644
index 000000000..1f7caee99
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_07_Autoplaying_Carousels_without_Controls.razor
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_08_Touch.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_08_Touch.razor
new file mode 100644
index 000000000..b93ab978e
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_08_Touch.razor
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_09_Events.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_09_Events.razor
similarity index 79%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_09_Events.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_09_Events.razor
index b2370ebec..6c4c53888 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/Carousel_Demo_09_Events.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Carousel/Carousel_Demo_09_Events.razor
@@ -1,12 +1,12 @@
-
+
-
+
-
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor
new file mode 100644
index 000000000..1a3601297
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChartDocumentation.razor
@@ -0,0 +1,88 @@
+@attribute [Route(pageUrl)]
+@layout DemosMainLayout
+
+
+
+
+
+
+ For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette.
+ These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
+
+
+
+
+
+
+
+
+
+
+
+ Set the Stack property on each dataset to group bars into separate stacked series within the same chart.
+
+
+
+
+
+ Use BorderRadius on each dataset to soften bar edges and create rounded columns.
+
+
+
+
+
+ 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).
+
+
+
+
+
+
+
+
+ Configure chart-level animation timing through ChartOptions.Animation to delay or pace the initial render.
+
+
+
+
+
+ You can configure animations globally on the chart options or per dataset to stagger how each series enters the chart.
+
+
+
+
+
+ Mix BarChartDataset and LineChartDataset in the same chart to combine columns with a trend line.
+
+
+
+
+
+ Set the OnClick callback to react when a chart data item is selected. The callback receives ChartClickEventArgs with the dataset index and label, data-item index and label, and raw value.
+
+
+
+
+
+
+
+ For a complete charts setup walkthrough, see the
+ Getting Started — Charts Setup section.
+
+
+@code {
+ private const string pageUrl = DemoRouteConstants.Demos_URL_BarChart;
+ private const string pageTitle = "Blazor Bar Chart";
+ private const string pageDescription = "A BlazorExpress.ChartJS bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.";
+ private const string metaTitle = "Blazor Bar Chart Component";
+ private const string metaDescription = "A BlazorExpress.ChartJS bar chart component is used to represent data values as vertical bars. It is sometimes used to show trend data and to compare multiple data sets side by side.";
+ private const string imageUrl = "https://i.imgur.com/IX3bajc.png";
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_01_Examples.razor
similarity index 95%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_01_Examples.razor
index 02cc0d82d..ce5827611 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_01_Examples.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_01_Examples.razor
@@ -1,4 +1,4 @@
-
+
@@ -120,7 +120,7 @@
private BarChartDataset GetRandomBarChartDataset()
{
- var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();
+ var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor();
datasetsCount += 1;
@@ -128,8 +128,8 @@
{
Label = $"Product {datasetsCount}",
Data = GetRandomData(),
- BackgroundColor = new List { c.ToRgbString() },
- BorderColor = new List { c.ToRgbString() },
+ BackgroundColor = new List { c.ToChartRgbString() },
+ BorderColor = new List { c.ToChartRgbString() },
BorderWidth = new List { 0 },
};
}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor
similarity index 96%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor
index 948bf9ce0..f814b2c90 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_02_Horizontal_BarChart.razor
@@ -1,4 +1,4 @@
-
+
@code {
private BarChart barChart = default!;
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor
similarity index 97%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor
index 83b824549..06a271e18 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_03_Stacked_BarChart.razor
@@ -1,4 +1,4 @@
-
+
@code {
private BarChart barChart = default!;
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_04_Locale.razor
similarity index 97%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_04_Locale.razor
index c28f87227..802d39d04 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_04_Locale.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_04_Locale.razor
@@ -1,4 +1,4 @@
-
+
@code {
private BarChart barChart = default!;
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor
similarity index 97%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor
index a0f29f319..9af0adb37 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_05_Stacked_BarChart_with_Datalabels.razor
@@ -1,4 +1,4 @@
-
+
@code {
private BarChart barChart = default!;
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_07_Dataset_Animation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_07_Dataset_Animation.razor
new file mode 100644
index 000000000..00f6ba4f3
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_07_Dataset_Animation.razor
@@ -0,0 +1,61 @@
+
+
+@code {
+ private BarChart barChart = default!;
+ private BarChartOptions barChartOptions = default!;
+ private ChartData chartData = default!;
+
+ protected override void OnInitialized()
+ {
+ var colors = ColorUtility.CategoricalTwelveColors;
+
+ chartData = new ChartData
+ {
+ Labels = new List { "January", "February", "March", "April", "May", "June" },
+ Datasets = new List
+ {
+ new BarChartDataset
+ {
+ Label = "Product A",
+ Data = new List { 65, 59, 80, 81, 56, 55 },
+ BackgroundColor = new List { colors[0].ToChartColor().ToChartRgbString() },
+ BorderColor = new List { colors[0].ToChartColor().ToChartRgbString() },
+ BorderWidth = new List { 0 },
+ Animation = new ChartAnimation { Delay = 0, Duration = 1200 }
+ },
+ new BarChartDataset
+ {
+ Label = "Product B",
+ Data = new List { 28, 48, 40, 19, 86, 27 },
+ BackgroundColor = new List { colors[1].ToChartColor().ToChartRgbString() },
+ BorderColor = new List { colors[1].ToChartColor().ToChartRgbString() },
+ BorderWidth = new List { 0 },
+ Animation = new ChartAnimation { Delay = 250, Duration = 1200 }
+ },
+ new BarChartDataset
+ {
+ Label = "Product C",
+ Data = new List { 18, 38, 50, 29, 66, 47 },
+ BackgroundColor = new List { colors[2].ToChartColor().ToChartRgbString() },
+ BorderColor = new List { colors[2].ToChartColor().ToChartRgbString() },
+ BorderWidth = new List { 0 },
+ Animation = new ChartAnimation { Delay = 500, Duration = 1200 }
+ }
+ }
+ };
+
+ barChartOptions = new BarChartOptions
+ {
+ Responsive = true,
+ Animation = new ChartAnimation { Duration = 1200, Easing = "easeOutQuart" }
+ };
+ }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ await barChart.InitializeAsync(chartData, barChartOptions);
+
+ await base.OnAfterRenderAsync(firstRender);
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_08_Grouped_Stacks.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_08_Grouped_Stacks.razor
new file mode 100644
index 000000000..77360876b
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_08_Grouped_Stacks.razor
@@ -0,0 +1,77 @@
+
+
+@code {
+ private BarChart barChart = default!;
+ private BarChartOptions barChartOptions = default!;
+ private ChartData chartData = default!;
+
+ protected override void OnInitialized()
+ {
+ var colors = ColorUtility.CategoricalTwelveColors;
+
+ chartData = new ChartData
+ {
+ Labels = new List { "Q1", "Q2", "Q3", "Q4" },
+ Datasets = new List
+ {
+ new BarChartDataset
+ {
+ Label = "North Budget",
+ Data = new List { 42, 47, 44, 50 },
+ BackgroundColor = new List { colors[0] },
+ BorderColor = new List { colors[0] },
+ BorderWidth = new List { 0 },
+ Stack = "North"
+ },
+ new BarChartDataset
+ {
+ Label = "North Actual",
+ Data = new List { 39, 45, 48, 53 },
+ BackgroundColor = new List { colors[1] },
+ BorderColor = new List { colors[1] },
+ BorderWidth = new List { 0 },
+ Stack = "North"
+ },
+ new BarChartDataset
+ {
+ Label = "South Budget",
+ Data = new List { 35, 38, 41, 46 },
+ BackgroundColor = new List { colors[4] },
+ BorderColor = new List { colors[4] },
+ BorderWidth = new List { 0 },
+ Stack = "South"
+ },
+ new BarChartDataset
+ {
+ Label = "South Actual",
+ Data = new List { 33, 40, 43, 45 },
+ BackgroundColor = new List { colors[5] },
+ BorderColor = new List { colors[5] },
+ BorderWidth = new List { 0 },
+ Stack = "South"
+ }
+ }
+ };
+
+ barChartOptions = new BarChartOptions
+ {
+ Responsive = true,
+ Interaction = new Interaction { Mode = InteractionMode.Index }
+ };
+
+ barChartOptions.Scales.X!.Stacked = true;
+ barChartOptions.Scales.Y!.Stacked = true;
+ barChartOptions.Scales.X.Title = new ChartAxesTitle { Text = "Quarter", Display = true };
+ barChartOptions.Scales.Y.Title = new ChartAxesTitle { Text = "Revenue (in millions)", Display = true };
+ barChartOptions.Plugins.Title!.Text = "Grouped stacked revenue by region";
+ barChartOptions.Plugins.Title.Display = true;
+ }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ await barChart.InitializeAsync(chartData, barChartOptions);
+
+ await base.OnAfterRenderAsync(firstRender);
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_09_Border_Radius.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_09_Border_Radius.razor
new file mode 100644
index 000000000..669425b6e
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_09_Border_Radius.razor
@@ -0,0 +1,94 @@
+
+
+
+
+
+
+@code {
+ private BarChart barChart = default!;
+ private BarChartOptions barChartOptions = default!;
+ private ChartData chartData = default!;
+
+ private int datasetsCount;
+ private int labelsCount;
+ private readonly string[] months = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
+ private readonly Random random = new();
+
+ protected override void OnInitialized()
+ {
+ chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
+ barChartOptions = new BarChartOptions { Responsive = true, Interaction = new Interaction { Mode = InteractionMode.Index } };
+ }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ await barChart.InitializeAsync(chartData, barChartOptions);
+
+ await base.OnAfterRenderAsync(firstRender);
+ }
+
+ private async Task RandomizeAsync()
+ {
+ if (chartData.Datasets is null || !chartData.Datasets.Any())
+ return;
+
+ foreach (var dataset in chartData.Datasets.OfType())
+ dataset.Data = Enumerable.Range(0, dataset.Data?.Count ?? 0)
+ .Select(_ => (double?)random.Next(-100, 100))
+ .ToList();
+
+ await barChart.UpdateAsync(chartData, barChartOptions);
+ }
+
+ private List GetDefaultDataSets(int numberOfDatasets)
+ {
+ var datasets = new List();
+
+ for (var index = 0; index < numberOfDatasets; index++)
+ datasets.Add(GetRandomBarChartDataset());
+
+ return datasets;
+ }
+
+ private BarChartDataset GetRandomBarChartDataset()
+ {
+ var color = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor();
+
+ datasetsCount += 1;
+
+ return new BarChartDataset
+ {
+ Label = $"Product {datasetsCount}",
+ Data = GetRandomData(),
+ BackgroundColor = new List { color.ToChartRgbaString(0.5) },
+ BorderColor = new List { color.ToChartRgbString() },
+ BorderWidth = new List { 2 },
+ BorderRadius = new List { 10 }
+ };
+ }
+
+ private List GetRandomData()
+ {
+ var data = new List();
+ for (var index = 0; index < labelsCount; index++)
+ data.Add(random.Next(-100, 100));
+
+ return data;
+ }
+
+ private List GetDefaultDataLabels(int numberOfLabels)
+ {
+ var labels = new List();
+ for (var index = 0; index < numberOfLabels; index++)
+ labels.Add(GetNextDataLabel());
+
+ return labels;
+ }
+
+ private string GetNextDataLabel()
+ {
+ labelsCount += 1;
+ return months[labelsCount - 1];
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_10_Animation_Delay.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_10_Animation_Delay.razor
new file mode 100644
index 000000000..cd9a83146
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_10_Animation_Delay.razor
@@ -0,0 +1,64 @@
+
+
+@code {
+ private BarChart barChart = default!;
+ private BarChartOptions barChartOptions = default!;
+ private ChartData chartData = default!;
+
+ protected override void OnInitialized()
+ {
+ var colors = ColorUtility.CategoricalTwelveColors;
+
+ chartData = new ChartData
+ {
+ Labels = new List { "Chrome", "Firefox", "Safari", "Edge" },
+ Datasets = new List
+ {
+ new BarChartDataset
+ {
+ Label = "Windows",
+ Data = new List { 28000, 8000, 2000, 17000 },
+ BackgroundColor = new List { colors[3] },
+ BorderColor = new List { colors[3] },
+ BorderWidth = new List { 0 }
+ },
+ new BarChartDataset
+ {
+ Label = "macOS",
+ Data = new List { 8000, 10000, 14000, 8000 },
+ BackgroundColor = new List { colors[4] },
+ BorderColor = new List { colors[4] },
+ BorderWidth = new List { 0 }
+ },
+ new BarChartDataset
+ {
+ Label = "Other",
+ Data = new List { 28000, 10000, 14000, 8000 },
+ BackgroundColor = new List { colors[5] },
+ BorderColor = new List { colors[5] },
+ BorderWidth = new List { 0 }
+ }
+ }
+ };
+
+ barChartOptions = new();
+ barChartOptions.Responsive = true;
+ barChartOptions.Interaction = new Interaction { Mode = InteractionMode.Y };
+ barChartOptions.IndexAxis = "y";
+ barChartOptions.Scales.X!.Title = new ChartAxesTitle { Text = "Visitors", Display = true };
+ barChartOptions.Scales.Y!.Title = new ChartAxesTitle { Text = "Browser", Display = true };
+ barChartOptions.Scales.X.Stacked = true;
+ barChartOptions.Scales.Y.Stacked = true;
+ barChartOptions.Plugins.Title!.Text = "Operating system";
+ barChartOptions.Plugins.Title.Display = true;
+ barChartOptions.Animation = new ChartAnimation { Duration = 1000, Delay = 1500 };
+ }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ await barChart.InitializeAsync(chartData, barChartOptions);
+
+ await base.OnAfterRenderAsync(firstRender);
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_11_Combo_Bar_Line.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_11_Combo_Bar_Line.razor
new file mode 100644
index 000000000..6bef8dfb5
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_11_Combo_Bar_Line.razor
@@ -0,0 +1,52 @@
+
+
+@code {
+ private BarChart barChart = default!;
+ private BarChartOptions barChartOptions = default!;
+ private ChartData chartData = default!;
+
+ protected override void OnInitialized()
+ {
+ var revenueColor = ColorUtility.CategoricalTwelveColors[0].ToChartColor();
+ var targetColor = ColorUtility.CategoricalTwelveColors[1].ToChartColor();
+
+ chartData = new ChartData
+ {
+ Labels = new List { "January", "February", "March", "April", "May", "June" },
+ Datasets = new List
+ {
+ new BarChartDataset
+ {
+ Label = "Revenue",
+ Data = new List { 65, 59, 80, 81, 56, 55 },
+ BackgroundColor = new List { revenueColor.ToChartRgbaString() },
+ BorderColor = new List { revenueColor.ToChartRgbString() },
+ BorderWidth = new List { 0 }
+ },
+ new LineChartDataset
+ {
+ Label = "Target",
+ Data = new List { 50, 55, 60, 70, 72, 78 },
+ BackgroundColor = targetColor.ToChartRgbaString(),
+ BorderColor = targetColor.ToChartRgbString(),
+ PointRadius = new List { 4 },
+ PointHoverRadius = new List { 6 }
+ }
+ }
+ };
+
+ barChartOptions = new BarChartOptions
+ {
+ Responsive = true,
+ Interaction = new Interaction { Mode = InteractionMode.Index, Intersect = false }
+ };
+ }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ await barChart.InitializeAsync(chartData, barChartOptions);
+
+ await base.OnAfterRenderAsync(firstRender);
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_12_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_12_Click_Event.razor
new file mode 100644
index 000000000..914be216c
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BarCharts/BarChart_Demo_12_Click_Event.razor
@@ -0,0 +1,54 @@
+
+
+@if (selectedChartItem is not null)
+{
+
+ The bubble chart visualizes three dimensions of data by mapping each point to X, Y, and R values.
+
+
+ For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette.
+ These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
+
+
+
+
+
+
+ Set the OnClick callback to react when a bubble is selected. The callback receives ChartClickEventArgs with the dataset, point index, label, and structured raw X, Y, and R value.
+
+
+
+
+
+
+
+ For a complete charts setup walkthrough, see the
+ Getting Started — Charts Setup section.
+
+
+@code {
+ private const string pageUrl = DemoRouteConstants.Demos_URL_BubbleChart;
+ private const string pageTitle = "Blazor Bubble Chart";
+ private const string pageDescription = "A BlazorExpress.ChartJS bubble chart component is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the size of each bubble represents a third value.";
+ private const string metaTitle = "Blazor Bubble Chart Component";
+ private const string metaDescription = "A BlazorExpress.ChartJS bubble chart component is used to display three dimensions of data at the same time. The location of the bubble is determined by the first two dimensions and the size of each bubble represents a third value.";
+ private const string imageUrl = "https://i.imgur.com/GEox0tS.png";
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChart_Demo_01_Examples.razor
new file mode 100644
index 000000000..90657260e
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChart_Demo_01_Examples.razor
@@ -0,0 +1,137 @@
+
+
+
+
+
+
+
+
+@code {
+ private BubbleChart bubbleChart = default!;
+ private BubbleChartOptions bubbleChartOptions = default!;
+ private ChartData chartData = default!;
+
+ private int datasetsCount = 0;
+ private int labelsCount = 0;
+ private readonly string[] months = { "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" };
+ private readonly Random random = new();
+
+ protected override void OnInitialized()
+ {
+ chartData = new ChartData { Labels = GetDefaultDataLabels(6), Datasets = GetDefaultDataSets(3) };
+ bubbleChartOptions = new BubbleChartOptions { Responsive = true };
+ }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ await bubbleChart.InitializeAsync(chartData, bubbleChartOptions);
+
+ await base.OnAfterRenderAsync(firstRender);
+ }
+
+ private async Task RandomizeAsync()
+ {
+ if (chartData is null || chartData.Datasets is null || !chartData.Datasets.Any())
+ return;
+
+ var newDatasets = new List();
+
+ foreach (var dataset in chartData.Datasets)
+ if (dataset is BubbleChartDataset bubbleChartDataset && bubbleChartDataset.Data is not null)
+ {
+ var count = bubbleChartDataset.Data.Count;
+ var newData = new List();
+
+ for (var i = 0; i < count; i++)
+ newData.Add(NewBubbleChartDataPoint);
+
+ bubbleChartDataset.Data = newData;
+ newDatasets.Add(bubbleChartDataset);
+ }
+
+ chartData.Datasets = newDatasets;
+
+ await bubbleChart.UpdateAsync(chartData, bubbleChartOptions);
+ }
+
+ private async Task AddDatasetAsync()
+ {
+ if (chartData is null || chartData.Datasets is null || datasetsCount >= 12)
+ return;
+
+ chartData = await bubbleChart.AddDatasetAsync(chartData, GetRandomBubbleChartDataset(), bubbleChartOptions);
+ }
+
+ private async Task AddDataAsync()
+ {
+ if (chartData is null || chartData.Datasets is null || labelsCount >= 12)
+ return;
+
+ var data = new List();
+
+ foreach (var dataset in chartData.Datasets)
+ if (dataset is BubbleChartDataset bubbleChartDataset)
+ data.Add(new BubbleChartDatasetData(bubbleChartDataset.Label, NewBubbleChartDataPoint));
+
+ chartData = await bubbleChart.AddDataAsync(chartData, GetNextDataLabel(), data);
+ }
+
+ #region Data Preparation
+
+ private List GetDefaultDataSets(int numberOfDatasets)
+ {
+ var datasets = new List();
+
+ for (var index = 0; index < numberOfDatasets; index++)
+ datasets.Add(GetRandomBubbleChartDataset());
+
+ return datasets;
+ }
+
+ private BubbleChartDataset GetRandomBubbleChartDataset()
+ {
+ var color = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor();
+
+ datasetsCount += 1;
+
+ return new BubbleChartDataset
+ {
+ Label = $"Product {datasetsCount}",
+ Data = GetRandomData(),
+ BackgroundColor = new List { color.ToChartRgbString() },
+ BorderColor = new List { color.ToChartRgbString() },
+ HoverBorderWidth = new List { 4 }
+ };
+ }
+
+ private List GetRandomData()
+ {
+ var data = new List();
+
+ for (var index = 0; index < labelsCount; index++)
+ data.Add(NewBubbleChartDataPoint);
+
+ return data;
+ }
+
+ private List GetDefaultDataLabels(int numberOfLabels)
+ {
+ var labels = new List();
+
+ for (var index = 0; index < numberOfLabels; index++)
+ labels.Add(GetNextDataLabel());
+
+ return labels;
+ }
+
+ private string GetNextDataLabel()
+ {
+ labelsCount += 1;
+ return months[labelsCount - 1];
+ }
+
+ private BubbleChartDataPoint NewBubbleChartDataPoint => new(random.Next(40), random.Next(40), random.Next(10));
+
+ #endregion Data Preparation
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChart_Demo_02_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChart_Demo_02_Click_Event.razor
new file mode 100644
index 000000000..ba1ccaff3
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/BubbleCharts/BubbleChart_Demo_02_Click_Event.razor
@@ -0,0 +1,61 @@
+
+
+@if (selectedChartItem is not null)
+{
+
+
+
+
+ BarChart and LineChart now support mixed bar/line datasets, and BubbleChart is available alongside the rest of the chart gallery.
+
+
+
+
+
+
+ For a complete charts setup walkthrough, see the
+ Getting Started — Charts Setup section.
+
+
+@code {
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Charts;
+ private const string pageTitle = "Blazor Charts";
+ private const string pageDescription = "BlazorExpress.ChartJS provides chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly.";
+ private const string metaTitle = "Blazor Chart Components";
+ private const string metaDescription = "BlazorExpress.ChartJS provides chart components on top of Chart.js to visualize data. It contains a rich UI gallery of charts that cater to all charting scenarios. Its high performance helps render large amounts of data quickly.";
+ private const string imageUrl = "https://i.imgur.com/IX3bajc.png";
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/Charts_Demo_00_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/Charts_Demo_00_Examples.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/Charts_Demo_00_Examples.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/Charts_Demo_00_Examples.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChartDocumentation.razor
new file mode 100644
index 000000000..fdb4385d9
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChartDocumentation.razor
@@ -0,0 +1,47 @@
+@attribute [Route(pageUrl)]
+@layout DemosMainLayout
+
+
+
+
+
+
+ For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette.
+ These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
+
+
+
+
+
+
+
+
+
+
+ Set the OnClick callback to react when a doughnut segment is selected. The callback receives ChartClickEventArgs with the dataset, item index, label, and raw value.
+
+
+
+
+
+
+
+ For a complete charts setup walkthrough, see the
+ Getting Started — Charts Setup section.
+
+
+@code {
+ private const string pageUrl = DemoRouteConstants.Demos_URL_DoughnutChart;
+ private const string pageTitle = "Blazor Doughnut Chart";
+ private const string pageDescription = "A BlazorExpress.ChartJS doughnut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the doughnut chart is hollow. This makes it easier to see the individual values of each category.";
+ private const string metaTitle = "Blazor Doughnut Chart Component";
+ private const string metaDescription = "A BlazorExpress.ChartJS doughnut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the doughnut chart is hollow. This makes it easier to see the individual values of each category.";
+ private const string imageUrl = "https://i.imgur.com/xEPhAsW.png";
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_01_Examples.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_02_Datalabels.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_02_Datalabels.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChart_Demo_02_Datalabels.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_02_Datalabels.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_03_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_03_Click_Event.razor
new file mode 100644
index 000000000..fe0a70c20
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/DoughnutCharts/DoughnutChart_Demo_03_Click_Event.razor
@@ -0,0 +1,54 @@
+
+
+@if (selectedChartItem is not null)
+{
+
+
+ For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette.
+ These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
+
+
+
+
+
+
+
+
+ By default, the chart is using the default locale of the platform on which it is running.
+ In the following example, you will see the chart in the German locale (de_DE).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Compare monotone cubic interpolation, regular cubic interpolation, and the default linear rendering to control how line segments are smoothed.
+
+
+
+
+
+
+
+
+
+
+ Combine LineChartDataset and BarChartDataset in a single line chart to compare forecast and actual values.
+
+
+
+
+
+
+ Set the OnClick callback to react when a line data point is selected. The callback receives ChartClickEventArgs with the dataset, point index, label, and raw value.
+
+
+
+
+
+
+
+ For a complete charts setup walkthrough, see the
+ Getting Started — Charts Setup section.
+
+
+@code {
+ private const string pageUrl = DemoRouteConstants.Demos_URL_LineChart;
+ private const string pageTitle = "Blazor Line Chart";
+ private const string pageDescription = "A BlazorExpress.ChartJS line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
+ private const string metaTitle = "Blazor Line Chart Component";
+ private const string metaDescription = "A BlazorExpress.ChartJS line chart component is a graphical representation of data that uses a series of connected points to show how the data changes over time. It is a type of x-y chart, where the x-axis represents the independent variable, such as time, and the y-axis represents the dependent variable, such as the value.";
+ private const string imageUrl = "https://i.imgur.com/8b7jH0D.png";
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor
similarity index 95%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor
index 6a6e950d5..aac4861f0 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_01_A_Examples.razor
@@ -1,4 +1,4 @@
-
+
@@ -67,7 +67,7 @@
chartData.Datasets = newDatasets;
- await lineChart.UpdateValuesAsync(chartData);
+ await lineChart.UpdateAsync(chartData, lineChartOptions);
}
private async Task AddDatasetAsync()
@@ -121,7 +121,7 @@
private LineChartDataset GetRandomLineChartDataset()
{
- var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();
+ var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor();
datasetsCount += 1;
@@ -129,8 +129,8 @@
{
Label = $"Team {datasetsCount}",
Data = GetRandomData(),
- BackgroundColor = c.ToRgbaString(),
- BorderColor = c.ToRgbString(),
+ BackgroundColor = c.ToChartRgbaString(),
+ BorderColor = c.ToChartRgbString(),
PointRadius = new List { 5 },
PointHoverRadius = new List { 8 },
};
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_01_B_Examples.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_02_Locale.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_02_Locale.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_02_Locale.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_03_Dynamically_add_data.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_03_Dynamically_add_data.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_03_Dynamically_add_data.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_03_Dynamically_add_data.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_04_Datalabels.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_04_Datalabels.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_04_Datalabels.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_04_Datalabels.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor
similarity index 94%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor
index 1a9cbb827..44c157cc3 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/LineCharts/LineChart_Demo_05_Tick_Configuration.razor
@@ -1,4 +1,4 @@
-
+ Set the OnClick callback to react when a pie slice is selected. The callback receives ChartClickEventArgs with the dataset, item index, label, and raw value.
+
+
+
+
+
+
+
+ For a complete charts setup walkthrough, see the
+ Getting Started — Charts Setup section.
+
+
@code {
- private const string pageUrl = RouteConstants.Demos_PieChart_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_PieChart;
private const string pageTitle = "Blazor Pie Chart";
- private const string pageDescription = "A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories.";
+ private const string pageDescription = "A BlazorExpress.ChartJS pie chart component is a circular chart that shows the proportional values of different categories.";
private const string metaTitle = "Blazor Pie Chart";
- private const string metaDescription = "A Blazor Bootstrap pie chart component is a circular chart that shows the proportional values of different categories.";
+ private const string metaDescription = "A BlazorExpress.ChartJS pie chart component is a circular chart that shows the proportional values of different categories.";
private const string imageUrl = "https://i.imgur.com/ieBupT2.png";
}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_01_Examples.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChart_Demo_01_Examples.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_01_Examples.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChart_Demo_02_Datalabels.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_02_Datalabels.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChart_Demo_02_Datalabels.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_02_Datalabels.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChart_Demo_03_Change_Legend_Position.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_03_Change_Legend_Position.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChart_Demo_03_Change_Legend_Position.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_03_Change_Legend_Position.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_04_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_04_Click_Event.razor
new file mode 100644
index 000000000..54448bb79
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PieCharts/PieChart_Demo_04_Click_Event.razor
@@ -0,0 +1,54 @@
+
+
+@if (selectedChartItem is not null)
+{
+
+
+ For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette.
+ These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
+
+
+
+
+
+
+ Set the OnClick callback to react when a polar-area segment is selected. The callback receives ChartClickEventArgs with the dataset, item index, label, and raw value.
+
+
+
+
+
+
+
+ For a complete charts setup walkthrough, see the
+ Getting Started — Charts Setup section.
+
+
+@code {
+ private const string pageUrl = DemoRouteConstants.Demos_URL_PolarAreaChart;
+ private const string pageTitle = "Blazor Polar Area Chart";
+ private const string pageDescription = "BlazorExpress.ChartJS polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.";
+ private const string metaTitle = "Blazor Polar Area Chart Component";
+ private const string metaDescription = "BlazorExpress.ChartJS polar area charts are similar to pie charts, but each segment has the same angle - the radius of the segment differs depending on the value.";
+ private const string imageUrl = "https://i.imgur.com/xLAqwGi.png";
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_01_Examples.razor
similarity index 94%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChart_Demo_01_Examples.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_01_Examples.razor
index 73a2e2f6f..9dc95bf38 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChart_Demo_01_Examples.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_01_Examples.razor
@@ -1,4 +1,4 @@
-
+
@@ -59,7 +59,7 @@
var backgroundColors = new List();
for (var index = 0; index < count; index++)
{
- backgroundColors.Add(chartColors![index].ToColor().ToRgbaString(0.5)); // RGBA
+ backgroundColors.Add(chartColors![index].ToChartColor().ToChartRgbaString(0.5)); // RGBA
}
polarAreaChartDataset.Data = newData;
@@ -95,7 +95,7 @@
foreach (var dataset in chartData.Datasets)
{
if (dataset is PolarAreaChartDataset polarAreaChartDataset)
- data.Add(new PolarAreaChartDatasetData(polarAreaChartDataset.Label, random.Next(0, 100), chartColors![dataLabelsCount - 1].ToColor().ToRgbaString(0.5), null));
+ data.Add(new PolarAreaChartDatasetData(polarAreaChartDataset.Label, random.Next(0, 100), chartColors![dataLabelsCount - 1].ToChartColor().ToChartRgbaString(0.5), null));
}
chartData = await polarAreaChart.AddDataAsync(chartData, GetNextDataLabel(), data);
@@ -156,7 +156,7 @@
var colors = new List();
for (var index = 0; index < dataLabelsCount; index++)
{
- colors.Add(chartColors![index].ToColor().ToRgbaString(0.5)); // RGBA
+ colors.Add(chartColors![index].ToChartColor().ToChartRgbaString(0.5)); // RGBA
}
return colors;
@@ -167,7 +167,7 @@
var colors = new List();
for (var index = 0; index < dataLabelsCount; index++)
{
- colors.Add(chartColors![index].ToColor().ToRgbString()); // RGB
+ colors.Add(chartColors![index].ToChartColor().ToChartRgbString()); // RGB
}
return colors;
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Click_Event.razor
new file mode 100644
index 000000000..dc6df8745
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/PolarAreaCharts/PolarAreaChart_Demo_02_Click_Event.razor
@@ -0,0 +1,60 @@
+
+
+@if (selectedChartItem is not null)
+{
+
+
+ For data visualization, you can use the predefined palettes ColorUtility.CategoricalTwelveColors for a 12-color palette and ColorUtility.CategoricalSixColors for a 6-color palette.
+ These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
+
+
+
+
+
+
+ Set the OnClick callback to react when a radar data point is selected. The callback receives ChartClickEventArgs with the dataset, point index, label, and raw value.
+
+
+
+
+
+
+
+ For a complete charts setup walkthrough, see the
+ Getting Started — Charts Setup section.
+
+
+@code {
+ private const string pageUrl = DemoRouteConstants.Demos_URL_RadarChart;
+ private const string pageTitle = "Blazor Radar Chart";
+ private const string pageDescription = "A BlazorExpress.ChartJS radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.";
+ private const string metaTitle = "Blazor Radar Chart Component";
+ private const string metaDescription = "A BlazorExpress.ChartJS radar chart component is a way of showing multiple data points and the variation between them. They are often useful for comparing the points of two or more different data sets.";
+ private const string imageUrl = "https://i.imgur.com/Urrb79M.png";
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChart_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_01_Examples.razor
similarity index 95%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChart_Demo_01_Examples.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_01_Examples.razor
index a4de5e1a6..34926e6dd 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChart_Demo_01_Examples.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_01_Examples.razor
@@ -1,4 +1,4 @@
-
+
@@ -124,7 +124,7 @@
private RadarChartDataset GetRandomRadarChartDataset()
{
- var c = chartColors![datasetsCount].ToColor();
+ var c = chartColors![datasetsCount].ToChartColor();
datasetsCount += 1;
@@ -132,8 +132,8 @@
{
Label = $"Team {datasetsCount}",
Data = GetRandomData(),
- BackgroundColor = c.ToRgbaString(),
- BorderColor = c.ToRgbaString(0.8),
+ BackgroundColor = c.ToChartRgbaString(),
+ BorderColor = c.ToChartRgbaString(0.8),
BorderWidth = 2,
Fill = true,
HoverBorderWidth = 4,
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_02_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_02_Click_Event.razor
new file mode 100644
index 000000000..4b58bd8a9
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/RadarCharts/RadarChart_Demo_02_Click_Event.razor
@@ -0,0 +1,57 @@
+
+
+@if (selectedChartItem is not null)
+{
+
+ Set the OnClick callback to react when a scatter point is selected. The callback receives ChartClickEventArgs with the dataset, point index, label, and structured raw X and Y value.
+
+
+
+
+
+
+
+ For a complete charts setup walkthrough, see the
+ Getting Started — Charts Setup section.
+
+
@code {
- private const string pageUrl = RouteConstants.Demos_ScatterChart_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_ScatterChart;
private const string pageTitle = "Blazor Scatter Chart";
- private const string pageDescription = "A Blazor Bootstrap scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties.";
+ private const string pageDescription = "BlazorExpress.ChartJS scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties.";
private const string metaTitle = "Blazor Scatter Chart Component";
- private const string metaDescription = "A Blazor Bootstrap scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties.";
+ private const string metaDescription = "BlazorExpress.ChartJS scatter chart components are based on basic line charts with the x-axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties.";
private const string imageUrl = "https://i.imgur.com/GEox0tS.png";
}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChart_Demo_01_Basic_Example.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_01_Basic_Example.razor
similarity index 88%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChart_Demo_01_Basic_Example.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_01_Basic_Example.razor
index 9e32eb5bd..5a48d5f8b 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChart_Demo_01_Basic_Example.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_01_Basic_Example.razor
@@ -1,4 +1,4 @@
-
+
@code {
private ScatterChart scatterChart = default!;
@@ -35,14 +35,14 @@
private ScatterChartDataset GetRandomRadarChartDataset(int recordIndex)
{
- var c = ColorUtility.CategoricalTwelveColors[recordIndex].ToColor();
+ var c = ColorUtility.CategoricalTwelveColors[recordIndex].ToChartColor();
return new ScatterChartDataset
{
Label = $"Team {recordIndex + 1}",
Data = GetRandomData(),
- BackgroundColor = c.ToRgbaString(), // RGBA
- BorderColor = c.ToRgbString(), // RGB
+ BackgroundColor = c.ToChartRgbaString(), // RGBA
+ BorderColor = c.ToChartRgbString(), // RGB
BorderWidth = 2,
HoverBorderWidth = 4,
};
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChart_Demo_02_Dynamic_Data.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_02_Dynamic_Data.razor
similarity index 96%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChart_Demo_02_Dynamic_Data.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_02_Dynamic_Data.razor
index 49b8b2acd..402c201a9 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChart_Demo_02_Dynamic_Data.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_02_Dynamic_Data.razor
@@ -1,4 +1,4 @@
-
+
@@ -120,7 +120,7 @@
private ScatterChartDataset GetRandomScatterChartDataset()
{
- var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToColor();
+ var c = ColorUtility.CategoricalTwelveColors[datasetsCount].ToChartColor();
datasetsCount += 1;
@@ -128,8 +128,8 @@
{
Label = $"Team {datasetsCount}",
Data = GetRandomData(),
- BackgroundColor = c.ToRgbaString(), // RGBA
- BorderColor = c.ToRgbString(), // RGB
+ BackgroundColor = c.ToChartRgbaString(), // RGBA
+ BorderColor = c.ToChartRgbString(), // RGB
BorderWidth = 2,
Fill = true,
HoverBorderWidth = 4,
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_03_Click_Event.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_03_Click_Event.razor
new file mode 100644
index 000000000..c84c959c2
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Charts/ScatterCharts/ScatterChart_Demo_03_Click_Event.razor
@@ -0,0 +1,62 @@
+
+
+@if (selectedChartItem is not null)
+{
+
@@ -71,7 +70,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Collapse_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Collapse;
private const string pageTitle = "Blazor Collapse";
private const string pageDescription = "Toggle the visibility of content across your project with the Blazor Bootstrap Collapse component.";
private const string metaTitle = "Blazor Collapse Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/Collapse_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Collapse/Collapse_Demo_01_Examples.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/Collapse_Demo_01_Examples.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Collapse/Collapse_Demo_01_Examples.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/Collapse_Demo_02_Horizontal.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Collapse/Collapse_Demo_02_Horizontal.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/Collapse_Demo_02_Horizontal.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Collapse/Collapse_Demo_02_Horizontal.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/Collapse_Demo_03_Events.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Collapse/Collapse_Demo_03_Events.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Collapse/Collapse_Demo_03_Events.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Collapse/Collapse_Demo_03_Events.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialogDocumentation.razor
similarity index 89%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialogDocumentation.razor
index 6b967413c..9d4139879 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialogDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialogDocumentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
@@ -74,7 +73,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_ConfirmDialog_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_ConfirmDialog;
private const string pageTitle = "Blazor Confirm Dialog";
private const string pageDescription = "Use Blazor Bootstrap confirm dialog component if you want the user to verify or accept something.";
private const string metaTitle = "Blazor Confirm Dialog Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_01_Examples.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_01_Examples.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_01_Examples.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_03_Dynamic_Component_As_Confirm_Dialog.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_03_Dynamic_Component_As_Confirm_Dialog.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_03_Dynamic_Component_As_Confirm_Dialog.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_03_Dynamic_Component_As_Confirm_Dialog.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_04_Change_Buttons_Text_And_Color.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_04_Change_Buttons_Text_And_Color.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_04_Change_Buttons_Text_And_Color.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_04_Change_Buttons_Text_And_Color.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_05_Optional_Sizes.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_05_Optional_Sizes.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_05_Optional_Sizes.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_05_Optional_Sizes.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_06_Scrolling_Long_Content_01.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_06_Scrolling_Long_Content_01.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_06_Scrolling_Long_Content_01.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_06_Scrolling_Long_Content_01.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_06_Scrolling_Long_Content_02.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_06_Scrolling_Long_Content_02.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_06_Scrolling_Long_Content_02.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_06_Scrolling_Long_Content_02.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_07_Vertically_Centered_01.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_07_Vertically_Centered_01.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_07_Vertically_Centered_01.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_07_Vertically_Centered_01.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_07_Vertically_Centered_02.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_07_Vertically_Centered_02.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_07_Vertically_Centered_02.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_07_Vertically_Centered_02.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_08_Disable_AutoFocus_Yes_Button.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_08_Disable_AutoFocus_Yes_Button.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/ConfirmDialog_Demo_08_Disable_AutoFocus_Yes_Button.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/ConfirmDialog_Demo_08_Disable_AutoFocus_Yes_Button.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/EmployeeDemoComponent.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/EmployeeDemoComponent.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/EmployeeDemoComponent.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/EmployeeDemoComponent.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/LongContentDemoComponent.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/LongContentDemoComponent.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/ConfirmDialog/LongContentDemoComponent.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/ConfirmDialog/LongContentDemoComponent.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/DropdownDocumentation.razor
similarity index 95%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/DropdownDocumentation.razor
index af7d67f04..1709da1cc 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/DropdownDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/DropdownDocumentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
@@ -186,7 +185,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Dropdown_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Dropdown;
private const string pageTitle = "Blazor Dropdown";
private const string pageDescription = "Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They are toggled by clicking, not by hovering; this is an intentional design decision'by bootstrap.";
private const string metaTitle = "Blazor Dropdown Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_01_Single_Button.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_01_Single_Button.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_01_Single_Button.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_01_Single_Button.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_02_Color.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_02_Color.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_02_Color.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_02_Color.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_03_Split_Button.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_03_Split_Button.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_03_Split_Button.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_03_Split_Button.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_04_A_Sizing.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_04_A_Sizing.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_04_A_Sizing.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_04_A_Sizing.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_04_B_Sizing.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_04_B_Sizing.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_04_B_Sizing.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_04_B_Sizing.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_05_A_Directions_Dropup.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_05_A_Directions_Dropup.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_05_A_Directions_Dropup.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_05_A_Directions_Dropup.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_05_B_Directions_DropupCentered.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_05_B_Directions_DropupCentered.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_05_B_Directions_DropupCentered.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_05_B_Directions_DropupCentered.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_05_C_Directions_Dropend.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_05_C_Directions_Dropend.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_05_C_Directions_Dropend.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_05_C_Directions_Dropend.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_05_D_Directions_Dropstart.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_05_D_Directions_Dropstart.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_05_D_Directions_Dropstart.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_05_D_Directions_Dropstart.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_06_Active.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_06_Active.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_06_Active.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_06_Active.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_07_A_Disabled.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_07_A_Disabled.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_07_A_Disabled.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_07_A_Disabled.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_07_B_Disabled.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_07_B_Disabled.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_07_B_Disabled.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_07_B_Disabled.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_08_Menu_Position.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_08_Menu_Position.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_08_Menu_Position.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_08_Menu_Position.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_09_Header.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_09_Header.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_09_Header.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_09_Header.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_10_Dividers.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_10_Dividers.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_10_Dividers.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_10_Dividers.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_11_Text.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_11_Text.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_11_Text.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_11_Text.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_12_Forms.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_12_Forms.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_12_Forms.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_12_Forms.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_13_AutoClose.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_13_AutoClose.razor
new file mode 100644
index 000000000..4bb9589c2
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_13_AutoClose.razor
@@ -0,0 +1,37 @@
+
+
+ Default dropdown
+
+ Menu item
+ Menu item
+ Menu item
+
+
+
+
+ Clickable outside
+
+ Menu item
+ Menu item
+ Menu item
+
+
+
+
+ Clickable inside
+
+ Menu item
+ Menu item
+ Menu item
+
+
+
+
+ Manual close
+
+ Menu item
+ Menu item
+ Menu item
+
+
+
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_14_Methods.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_14_Methods.razor
new file mode 100644
index 000000000..9b16514a2
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_14_Methods.razor
@@ -0,0 +1,40 @@
+
+
+
+ Dropdown button
+
+ Action
+ Another action
+ Something else here
+
+
+
+
+
+
+
+
+
+
+
+ Dropdown button
+
+ Action
+ Another action
+ Something else here
+
+
+
+
+
+
+
+@code {
+ private Dropdown dropdown1 = default!;
+ private Dropdown dropdown2 = default!;
+
+ private async Task ShowAsync() => await dropdown1.ShowAsync();
+ private async Task HideAsync() => await dropdown1.HideAsync();
+
+ private async Task ToggleAsync() => await dropdown2.ToggleAsync();
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_15_Events.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_15_Events.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Dropdowns/Dropdown_Demo_15_Events.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Dropdowns/Dropdown_Demo_15_Events.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoCompleteDocumentation.razor
similarity index 90%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoCompleteDocumentation.razor
index 4c0f008b9..27462228b 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoCompleteDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoCompleteDocumentation.razor
@@ -1,17 +1,16 @@
@page "/autocomplete"
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
@@ -96,7 +95,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_AutoComplete_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_AutoComplete;
private const string pageTitle = "Blazor AutoComplete";
private const string pageDescription = "Blazor Bootstrap autocomplete component is a textbox that offers the users suggestions as they type from the data source. And it supports client-side and server-side filtering.";
private const string metaTitle = "Blazor AutoComplete Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoComplete_Demo_01_A_Client_Side_Filtering.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoComplete_Demo_01_A_Client_Side_Filtering.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoComplete_Demo_01_A_Client_Side_Filtering.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoComplete_Demo_01_A_Client_Side_Filtering.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoComplete_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoComplete_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoComplete_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoComplete_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoComplete_Demo_02_Server_Side_Filtering.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoComplete_Demo_02_Server_Side_Filtering.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoComplete_Demo_02_Server_Side_Filtering.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoComplete_Demo_02_Server_Side_Filtering.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoComplete_Demo_03_Set_Default_Value.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoComplete_Demo_03_Set_Default_Value.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoComplete_Demo_03_Set_Default_Value.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoComplete_Demo_03_Set_Default_Value.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoComplete_Demo_04_Validations.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoComplete_Demo_04_Validations.razor
similarity index 92%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoComplete_Demo_04_Validations.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoComplete_Demo_04_Validations.razor
index 376eb2fe7..37b6a2291 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoComplete_Demo_04_Validations.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoComplete_Demo_04_Validations.razor
@@ -1,19 +1,5 @@
@using System.ComponentModel.DataAnnotations
-
-
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoComplete_Demo_05_A_Disable.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoComplete_Demo_05_A_Disable.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoComplete_Demo_05_A_Disable.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoComplete_Demo_05_A_Disable.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoComplete_Demo_05_B_Disable.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoComplete_Demo_05_B_Disable.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoComplete_Demo_05_B_Disable.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoComplete_Demo_05_B_Disable.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoComplete_Demo_06_Sizing.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoComplete_Demo_06_Sizing.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/AutoComplete/AutoComplete_Demo_06_Sizing.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/AutoComplete/AutoComplete_Demo_06_Sizing.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CheckboxInput/CheckboxInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CheckboxInput/CheckboxInputDocumentation.razor
new file mode 100644
index 000000000..25caa024c
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CheckboxInput/CheckboxInputDocumentation.razor
@@ -0,0 +1,41 @@
+@page "/checkbox-input"
+
+@attribute [Route(pageUrl)]
+@layout DemosMainLayout
+
+
+
+
+
+
+
+
+
+
+
Use the Disabled parameter to disable the CheckboxInput.
+
+
Also, use Enable() and Disable() methods to enable and disable the CheckboxInput.
+
+ Do not use both the Disabled parameter and Enable() & Disable() methods.
+
+
+
+
+
+
This event fires when the CheckboxInput value changes, but not on every keystroke.
+
+
+
+@code {
+ private const string pageUrl = DemoRouteConstants.Demos_URL_CheckboxInput;
+ private const string pageTitle = "Blazor CheckboxInput";
+ private const string pageDescription = "The Blazor Bootstrap CheckboxInput component is constructed using an HTML input of type 'checkbox'.";
+ private const string metaTitle = "Blazor CheckboxInput Component";
+ private const string metaDescription = "The Blazor Bootstrap CheckboxInput component is constructed using an HTML input of type 'checkbox'.";
+ private const string imageUrl = "https://i.imgur.com/kqSggFK.png";
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CheckboxInput/CheckboxInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CheckboxInput/CheckboxInput_Demo_01_Basic_Usage.razor
new file mode 100644
index 000000000..5b0d142d0
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CheckboxInput/CheckboxInput_Demo_01_Basic_Usage.razor
@@ -0,0 +1,13 @@
+
+
+
+
By default, e + - are blocked. For all integral numeric types, dot . is blocked.
@@ -96,7 +95,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_CurrencyInput_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_CurrencyInput;
private const string pageTitle = "Blazor CurrencyInput";
private const string pageDescription = "Use the Blazor Bootstrap CurrencyInput component to show the numbers in the user's locale format, including the currency symbol.";
private const string metaTitle = "Blazor CurrencyInput Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_01_Basic_Usage.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_01_Basic_Usage.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_01_Basic_Usage.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_02_Show_Currency_Symbols_for_the_Different_Locales.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_02_Show_Currency_Symbols_for_the_Different_Locales.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_02_Show_Currency_Symbols_for_the_Different_Locales.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_02_Show_Currency_Symbols_for_the_Different_Locales.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_03_Hide_Currency_Symbol.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_03_Hide_Currency_Symbol.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_03_Hide_Currency_Symbol.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_03_Hide_Currency_Symbol.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_04_Using_FractionDigits_and_IntegerDigits.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_04_Using_FractionDigits_and_IntegerDigits.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_04_Using_FractionDigits_and_IntegerDigits.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_04_Using_FractionDigits_and_IntegerDigits.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_05_Parentheses_Instead_of_Appending_A_Minus_Sign.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_05_Parentheses_Instead_of_Appending_A_Minus_Sign.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_05_Parentheses_Instead_of_Appending_A_Minus_Sign.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_05_Parentheses_Instead_of_Appending_A_Minus_Sign.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_06_Generic_Type.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_06_Generic_Type.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_06_Generic_Type.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_06_Generic_Type.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_07_Enable_Min_Max.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_07_Enable_Min_Max.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_07_Enable_Min_Max.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_07_Enable_Min_Max.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_08_Text_Alignment.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_08_Text_Alignment.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_08_Text_Alignment.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_08_Text_Alignment.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_09_Allow_Negative_Numbers.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_09_Allow_Negative_Numbers.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_09_Allow_Negative_Numbers.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_09_Allow_Negative_Numbers.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_10_A_Disable_Number_Input.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_10_A_Disable_Number_Input.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_10_A_Disable_Number_Input.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_10_A_Disable_Number_Input.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_10_B_Disable_Number_Input.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_10_B_Disable_Number_Input.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_10_B_Disable_Number_Input.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_10_B_Disable_Number_Input.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_11_Validations.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_11_Validations.razor
similarity index 94%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_11_Validations.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_11_Validations.razor
index 44912cd46..fde5114b6 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_11_Validations.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_11_Validations.razor
@@ -1,19 +1,5 @@
@using System.ComponentModel.DataAnnotations
-
-
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_12_Decimals.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_12_Decimals.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_12_Decimals.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_12_Decimals.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_13_Events_Value_Changed.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_13_Events_Value_Changed.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/CurrencyInput/CurrencyInput_Demo_13_Events_Value_Changed.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/CurrencyInput/CurrencyInput_Demo_13_Events_Value_Changed.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInputDocumentation.razor
similarity index 91%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInputDocumentation.razor
index 0e77f37d2..2e0a44580 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInputDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInputDocumentation.razor
@@ -1,17 +1,16 @@
@page "/date-input"
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
@@ -79,7 +78,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_DateInput_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_DateInput;
private const string pageTitle = "Blazor DateInput";
private const string pageDescription = "The Blazor Bootstrap DateInput component is constructed using an HTML input of type 'date' which limits user input based on pre-defined parameters. This component enables users to input a date using a text box with validation or a special date picker interface.";
private const string metaTitle = "Blazor DateInput Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_01_Basic_Usage.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_01_Basic_Usage.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_01_Basic_Usage.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_02_Generic_Type.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_02_Generic_Type.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_02_Generic_Type.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_02_Generic_Type.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_03_Max_Min.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_03_Max_Min.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_03_Max_Min.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_03_Max_Min.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_04_A_Disable_Date_Input.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_04_A_Disable_Date_Input.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_04_A_Disable_Date_Input.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_04_A_Disable_Date_Input.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_04_B_Disable_Date_Input.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_04_B_Disable_Date_Input.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_04_B_Disable_Date_Input.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_04_B_Disable_Date_Input.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_05_Validations.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_05_Validations.razor
similarity index 90%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_05_Validations.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_05_Validations.razor
index e94f3616e..4992c4c27 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_05_Validations.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_05_Validations.razor
@@ -1,19 +1,5 @@
@using System.ComponentModel.DataAnnotations
-
-
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_06_Events_Value_Changed.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_06_Events_Value_Changed.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_06_Events_Value_Changed.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_06_Events_Value_Changed.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_07_Restrict_The_Date_Field_Based_On_The_Entry_In_Another_Date_Field.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_07_Restrict_The_Date_Field_Based_On_The_Entry_In_Another_Date_Field.razor
similarity index 94%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_07_Restrict_The_Date_Field_Based_On_The_Entry_In_Another_Date_Field.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_07_Restrict_The_Date_Field_Based_On_The_Entry_In_Another_Date_Field.razor
index a00d2c9c6..294cc816c 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/DateInput/DateInput_Demo_07_Restrict_The_Date_Field_Based_On_The_Entry_In_Another_Date_Field.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DateInput/DateInput_Demo_07_Restrict_The_Date_Field_Based_On_The_Entry_In_Another_Date_Field.razor
@@ -1,19 +1,5 @@
@using System.ComponentModel.DataAnnotations
-
-
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DragAndDropFileInput/DragAndDropFileInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DragAndDropFileInput/DragAndDropFileInputDocumentation.razor
new file mode 100644
index 000000000..d15a2f0ce
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/DragAndDropFileInput/DragAndDropFileInputDocumentation.razor
@@ -0,0 +1,37 @@
+@page "/drag-and-drop-file-input"
+
+@attribute [Route(pageUrl)]
+@layout DemosMainLayout
+
+
+
+
+
+
+
Drop files onto the area on desktop, or tap it on touch devices to open the native file picker.
+
+
+
+
+
Drop and picker selection share the same extension, size, and count validation behavior. Configure validation-message templates with {FileName}, {MaxFileSize}, {AllowedFileTypes}, or {MaxFileCount} where applicable; the single-file message is static.
+
+
+
+
+
Use FilesChanged to update a form model while retaining the drag-and-drop area and touch picker fallback.
+ The EnumInput component displays enum values in a dropdown, allowing users to select from a predefined set of options.
+ Enum labels use DisplayAttribute.GetName() when a DisplayAttribute is present, including resource-backed names, and fall back to the enum member name.
+
+ How to use:
+
+
+
Define an enum representing your options.
+
Add the EnumInput component to your page, specifying the TEnum type parameter.
+
Bind the selected value using @@bind-Value or @@bind-Text as needed.
+
Use the selected value or text in your logic as shown in the demo.
+
+
+ This demo shows how to bind both the enum value and text, and how to display the selected result.
+
+
+
+
+
+
+ The EnumInput component can be rendered in various sizes to fit different UI requirements.
+
+ How to use:
+
+
+
Set the Size parameter to one of the EnumInputSize values (Small, Normal, Large).
+
Bind the selected value as needed.
+
+
+ This demo shows how to display EnumInput in different sizes for flexible layout integration.
+
+
+
+
+
+
+ The EnumInput component can be disabled to prevent user interaction.
+
+ How to use:
+
+
+
Set the Disabled parameter to true to make the dropdown non-interactive.
+
Bind the value as usual; the user will not be able to change it.
+
+
+ This demo demonstrates how to render EnumInput in a disabled state.
+
+
+
+
+
+
+ The EnumInput component supports event callbacks for value and text changes, enabling custom logic when the selection changes.
+
+ How to use (ValueChanged):
+
+
+
Set the Value parameter and handle the ValueChanged event to respond to selection changes.
+
Update your logic based on the new value in the event handler.
+
+
+ This demo shows how to handle value changes using the ValueChanged event.
+
+
+
+ How to use (TextChanged):
+
+
+
Set the Text parameter and handle the TextChanged event to respond to text changes.
+
Update your logic based on the new text in the event handler.
+
+
+ This demo shows how to handle text changes using the TextChanged event.
+
+
+
+
+
+
+ The EnumInput component can be enabled or disabled dynamically at runtime.
+
+ How to use:
+
+
+
Bind the Disabled parameter to a boolean property in your component.
+
Update the property in your code (e.g., via button click) to enable or disable the EnumInput as needed.
+
+
+ This demo demonstrates how to programmatically enable or disable the EnumInput component.
+
+
+
+
+@code {
+ private const string pageUrl = DemoRouteConstants.Demos_URL_EnumInput;
+ private const string pageTitle = "Blazor EnumInput";
+ private const string pageDescription = "The Blazor Bootstrap EnumInput component renders a dropdown list from an enumeration (enum), enabling users to select from a predefined set of options. It simplifies data entry by binding directly to enum types and supports customization with sizes.";
+ private const string metaTitle = "Blazor EnumInput Component";
+ private const string metaDescription = "The Blazor Bootstrap EnumInput component renders a dropdown list from an enumeration (enum), enabling users to select from a predefined set of options. It simplifies data entry by binding directly to enum types and supports customization with sizes.";
+ private const string imageUrl = "https://i.imgur.com/1mVjqQv.png";
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_01_How_it_works.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_01_How_it_works.razor
new file mode 100644
index 000000000..2351d6781
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_01_How_it_works.razor
@@ -0,0 +1,33 @@
+@using System.ComponentModel.DataAnnotations
+
+
+
Selected value: @selectedStatusValue
+
+
+
Selected text: @selectedStatusText
+
+@code {
+ private int selectedStatusValue;
+ private string? selectedStatusText;
+
+ override protected void OnInitialized()
+ {
+ selectedStatusValue = (int)Status.Active;
+ selectedStatusText = StatusLabels.Pending;
+ }
+
+ public enum Status
+ {
+ Active,
+ [Display(Name = "Inactive user")]
+ Inactive,
+
+ [Display(Name = nameof(StatusLabels.Pending), ResourceType = typeof(StatusLabels))]
+ Pending
+ }
+
+ public static class StatusLabels
+ {
+ public static string Pending => "Waiting for review";
+ }
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_03_Sizes.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_03_Sizes.razor
new file mode 100644
index 000000000..592158433
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_03_Sizes.razor
@@ -0,0 +1,18 @@
+
+
+
+
+
+@code {
+ private int value1 = (int)Status.Pending;
+ private int value2 = (int)Status.Pending;
+ private int value3 = (int)Status.Pending;
+ private int value4 = (int)Status.Pending;
+
+ public enum Status
+ {
+ Active,
+ Inactive,
+ Pending
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_06_Disabled.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_06_Disabled.razor
new file mode 100644
index 000000000..b55c02f61
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_06_Disabled.razor
@@ -0,0 +1,12 @@
+
+
+@code {
+ private int value1 = (int)Status.Pending;
+
+ public enum Status
+ {
+ Active,
+ Inactive,
+ Pending
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_07_Events_A_ValueChanged.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_07_Events_A_ValueChanged.razor
new file mode 100644
index 000000000..79145f75b
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_07_Events_A_ValueChanged.razor
@@ -0,0 +1,31 @@
+
+
Selected value: @value1
+
+@code {
+ private int value1 = (int)Status.Pending;
+
+ private void OnValueChanged(int value)
+ {
+ value1 = value;
+
+ if (value == (int)Status.Active)
+ {
+ // Do something when the value is Active
+ }
+ else if (value == (int)Status.Inactive)
+ {
+ // Do something when the value is Inactive
+ }
+ else if (value == (int)Status.Pending)
+ {
+ // Do something when the value is Pending
+ }
+ }
+
+ public enum Status
+ {
+ Active,
+ Inactive,
+ Pending
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_07_Events_B_TextChanged.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_07_Events_B_TextChanged.razor
new file mode 100644
index 000000000..8b475a5f7
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_07_Events_B_TextChanged.razor
@@ -0,0 +1,31 @@
+
+
Selected text: @text1
+
+@code {
+ private string text1 = Status.Pending.ToString();
+
+ private void OnTextChanged(string value)
+ {
+ text1 = value;
+
+ if (value == "Active")
+ {
+ // Do something when the text is "Active"
+ }
+ else if (value == "Inactive")
+ {
+ // Do something when the text is "Inactive"
+ }
+ else if (value == "Pending")
+ {
+ // Do something when the text is "Pending"
+ }
+ }
+
+ public enum Status
+ {
+ Active,
+ Inactive,
+ Pending
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_08_Methods_Enable_Disable.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_08_Methods_Enable_Disable.razor
new file mode 100644
index 000000000..c4fce4c9f
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/EnumInput/EnumInput_Demo_08_Methods_Enable_Disable.razor
@@ -0,0 +1,28 @@
+
+
+
FileInput uses Bootstrap's standard visible file-control presentation. Use DragAndDropFileInput when a drop area is needed.
+
+
+
+
+
Set Multiple to allow a selected file to be removed without clearing the others.
+
+
+
+
+
Use Size to apply Bootstrap's form-control-lg and form-control-sm file-control sizes.
+
+
+
+
+
FileInput validates sizes, counts, and extensions selected from the file dialog. Configure validation-message templates with {FileName}, {MaxFileSize}, {AllowedFileTypes}, or {MaxFileCount} where applicable; the single-file message is static.
+
+
+
+
+
Use FilesChanged to update a form model and combine file-selection rules with standard form validation.
+
+
+
+
+
An empty AllowedFileTypes collection accepts every extension while other configured rules remain active.
+
+
+
+@code {
+ private const string pageUrl = DemoRouteConstants.Demos_URL_FileInput;
+ private const string pageTitle = "Blazor FileInput";
+ private const string pageDescription = "The Blazor Bootstrap FileInput component provides a standard Bootstrap file control with validation and removal.";
+ private const string metaTitle = "Blazor FileInput Component";
+ private const string metaDescription = "The Blazor Bootstrap FileInput component provides a standard Bootstrap file control with validation and removal.";
+ private const string imageUrl = DemoScreenshotSrcConstants.Demos_URL_Forms_Prefix;
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/FileInput/FileInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/FileInput/FileInput_Demo_01_Basic_Usage.razor
new file mode 100644
index 000000000..5ac7324fe
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/FileInput/FileInput_Demo_01_Basic_Usage.razor
@@ -0,0 +1 @@
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/FileInput/FileInput_Demo_02_Multiple_Files_And_Removal.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/FileInput/FileInput_Demo_02_Multiple_Files_And_Removal.razor
new file mode 100644
index 000000000..cfc68955a
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/FileInput/FileInput_Demo_02_Multiple_Files_And_Removal.razor
@@ -0,0 +1 @@
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/FileInput/FileInput_Demo_03_Colors_And_Sizes.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/FileInput/FileInput_Demo_03_Colors_And_Sizes.razor
new file mode 100644
index 000000000..42e456842
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/FileInput/FileInput_Demo_03_Colors_And_Sizes.razor
@@ -0,0 +1,4 @@
+
By default, e + - are blocked. For all integral numeric types, dot . is blocked.
@@ -74,7 +73,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_NumberInput_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_NumberInput;
private const string pageTitle = "Blazor NumberInput";
private const string pageDescription = "Blazor Bootstrap NumberInput component is built around HTML input of type=\"number\" that prevents the user input based on the parameters set.";
private const string metaTitle = "Blazor NumberInput Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_01_Basic_Usage.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_01_Basic_Usage.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_01_Basic_Usage.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_02_Generic_Type.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_02_Generic_Type.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_02_Generic_Type.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_02_Generic_Type.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_03_Enable_Min_Max.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_03_Enable_Min_Max.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_03_Enable_Min_Max.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_03_Enable_Min_Max.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_04_Step.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_04_Step.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_04_Step.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_04_Step.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_05_Text_Alignment.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_05_Text_Alignment.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_05_Text_Alignment.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_05_Text_Alignment.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_06_Allow_Negative_Numbers.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_06_Allow_Negative_Numbers.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_06_Allow_Negative_Numbers.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_06_Allow_Negative_Numbers.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_07_A_Disable_Number_Input.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_07_A_Disable_Number_Input.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_07_A_Disable_Number_Input.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_07_A_Disable_Number_Input.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_07_B_Disable_Number_Input.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_07_B_Disable_Number_Input.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_07_B_Disable_Number_Input.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_07_B_Disable_Number_Input.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_08_Validations.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_08_Validations.razor
similarity index 94%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_08_Validations.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_08_Validations.razor
index c0a09f30d..30eef6b86 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_08_Validations.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_08_Validations.razor
@@ -1,19 +1,5 @@
@using System.ComponentModel.DataAnnotations
-
-
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_09_Events_Value_Changed.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_09_Events_Value_Changed.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/NumberInput/NumberInput_Demo_09_Events_Value_Changed.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/NumberInput/NumberInput_Demo_09_Events_Value_Changed.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/OTPInput/OTPInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/OTPInput/OTPInputDocumentation.razor
new file mode 100644
index 000000000..7b5d29bb6
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/OTPInput/OTPInputDocumentation.razor
@@ -0,0 +1,57 @@
+@page "/otp-input"
+@attribute [Route(pageUrl)]
+@layout DemosMainLayout
+
+
+
+
+
+
+
+ The OTPInput component provides a user-friendly interface for entering one-time passwords (OTP), commonly used for authentication and verification flows.
+
+ How to use:
+
+
+
Add the OTPInput component to your page.
+
Handle the OnOTPChanged event to capture the OTP value as the user types.
+
Handle the OnOTPCompleted event to respond when the user has entered the complete OTP.
+
Bind the entered OTP to a variable for display or further processing as needed.
+
+
+ This demo illustrates the basic usage of the OTPInput component, including event handling for OTP entry and completion.
+
+
+
+
+
+
+ The OTPInput component allows you to specify the required OTP length, adapting the number of input fields accordingly.
+
+ How to use:
+
+
+
Set the Length parameter to define how many digits or characters the OTP should have (e.g., Length="5").
+
Handle the OnOTPChanged and OnOTPCompleted events as shown in the demo to process the OTP input.
+
Display or use the entered OTP value as needed in your application.
+
+
+ This demo demonstrates how to configure the OTPInput component for a custom OTP length and handle user input accordingly.
+
+
+
+
+@code {
+ private const string componentName = nameof(OTPInput);
+ private const string pageUrl = DemoRouteConstants.Demos_URL_OTPInput;
+ private const string pageTitle = componentName;
+ private const string pageDescription = $"The {componentName} component allows users to enter a one-time password (OTP) in a secure and user-friendly manner. The component is designed to enhance the user experience by providing a visually appealing and functional input field for OTP entry.";
+ private const string metaTitle = $"Blazor {componentName} Component";
+ private const string metaDescription = $"The {componentName} component allows users to enter a one-time password (OTP) in a secure and user-friendly manner. The component is designed to enhance the user experience by providing a visually appealing and functional input field for OTP entry.";
+ private const string imageUrl = DemoScreenshotSrcConstants.Demos_URL_OTPInput;
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/OTPInput/OTPInput_Demo_01_How_it_works.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/OTPInput/OTPInput_Demo_01_How_it_works.razor
new file mode 100644
index 000000000..824373cf4
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/OTPInput/OTPInput_Demo_01_How_it_works.razor
@@ -0,0 +1,19 @@
+
+
+
Use the Disabled parameter to disable the PasswordInput.
+
+
Also, use Enable() and Disable() methods to enable and disable the PasswordInput.
+
+ Do not use both the Disabled parameter and Enable() & Disable() methods.
+
+
+
+
+
+
+ Like any other blazor input component, PasswordInput supports validations.
+ Add the DataAnnotations on the PasswordInput component to validate the user input before submitting the form.
+ In the below example, we used Required attribute.
+
+
+
+
+
+
This event fires when the PasswordInput value changes, but not on every keystroke.
+
+
+
+@code {
+ private const string pageUrl = DemoRouteConstants.Demos_URL_PasswordInput;
+ private const string pageTitle = "Blazor PasswordInput";
+ private const string pageDescription = "The Blazor Bootstrap PasswordInput component is constructed using an HTML input of type 'password'.";
+ private const string metaTitle = "Blazor PasswordInput Component";
+ private const string metaDescription = "The Blazor Bootstrap PasswordInput component is constructed using an HTML input of type 'password'.";
+ private const string imageUrl = "https://i.imgur.com/0k1C2XS.png";
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/PasswordInput/PasswordInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/PasswordInput/PasswordInput_Demo_01_Basic_Usage.razor
new file mode 100644
index 000000000..4b0c05b09
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/PasswordInput/PasswordInput_Demo_01_Basic_Usage.razor
@@ -0,0 +1,8 @@
+
+
+@code
+{
+ private RadioInput? radioInputRef;
+ private RadioInput? radioInputRef2;
+
+ private bool isChecked;
+ private bool isChecked2 = true;
+
+ private void Disable()
+ {
+ radioInputRef.Disable();
+ radioInputRef2.Disable();
+ }
+
+ private void Enable()
+ {
+ radioInputRef.Enable();
+ radioInputRef2.Enable();
+ }
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInputDocumentation.razor
similarity index 88%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInputDocumentation.razor
index cee95d4de..d921ebf98 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInputDocumentation.razor
@@ -1,17 +1,16 @@
@page "/range-input"
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
@@ -64,7 +63,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_RangeInput_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_RangeInput;
private const string pageTitle = "Blazor RangeInput";
private const string pageDescription = "Blazor Bootstrap RangeInput component is built around HTML input of type=\"range\".";
private const string metaTitle = "Blazor RangeInput Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInput_Demo_01_Basic_Usage_A.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInput_Demo_01_Basic_Usage_A.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInput_Demo_01_Basic_Usage_A.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInput_Demo_01_Basic_Usage_A.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInput_Demo_01_Basic_Usage_B.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInput_Demo_01_Basic_Usage_B.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInput_Demo_01_Basic_Usage_B.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInput_Demo_01_Basic_Usage_B.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInput_Demo_02_Disabled_A.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInput_Demo_02_Disabled_A.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInput_Demo_02_Disabled_A.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInput_Demo_02_Disabled_A.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInput_Demo_02_Disabled_B.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInput_Demo_02_Disabled_B.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInput_Demo_02_Disabled_B.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInput_Demo_02_Disabled_B.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInput_Demo_03_Min_Max.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInput_Demo_03_Min_Max.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInput_Demo_03_Min_Max.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInput_Demo_03_Min_Max.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInput_Demo_04_Step.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInput_Demo_04_Step.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInput_Demo_04_Step.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInput_Demo_04_Step.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInput_Demo_05_Decimals.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInput_Demo_05_Decimals.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInput_Demo_05_Decimals.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInput_Demo_05_Decimals.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInput_Demo_06_Tick_Marks.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInput_Demo_06_Tick_Marks.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInput_Demo_06_Tick_Marks.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RangeInput/RangeInput_Demo_06_Tick_Marks.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditorDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditorDocumentation.razor
new file mode 100644
index 000000000..77c567a32
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditorDocumentation.razor
@@ -0,0 +1,124 @@
+@page "/rich-text-editor"
+
+@attribute [Route(DemoRouteConstants.Demos_URL_RichTextEditor)]
+@layout DemosMainLayout
+
+
+
+
+
+
+
+ Start with the complete toolbar when authors need the full RichTextEditor feature set in one place. Keep Disabled set to false so every toolbar action remains available, from document styles and text formatting through media, tables, history, printing, and fullscreen mode.
+
+ How to use:
+
+
+
Add RichTextEditor to the page and provide an initial Value.
+
Omit ToolbarItems to render every supported toolbar control.
+
Keep Disabled set to false, then use toolbar actions to build a complete document.
+
+
+
+
+
+
+
+
+ Use a focused authoring toolbar to turn a rough release-note draft into structured, scannable content. While Disabled is false, each toolbar action can apply headings, emphasis, color, alignment, lists, and quotations.
+
+ How to use:
+
+
+
Choose the commands that match the authoring workflow in ToolbarItems.
+
Place the caret in a paragraph or select text in the draft.
+
Use each toolbar action needed for a heading, emphasis, list, alignment, or quotation as the document takes shape.
+
+
+
+
+
+
+
+
+ Give a publishing workflow only the insertion commands it needs to add a link, image, separator, or table to an already-authored announcement. This example does not configure ImageUploadHandler, so its Image dialog intentionally shows only the Image URL tab. Keep Disabled set to false while authors use each toolbar action.
+
+ How to use:
+
+
+
Configure the insertion-focused commands in ToolbarItems.
+
Place the caret where the new content belongs in the announcement.
+
Use the link, image, horizontal-rule, or table toolbar action and complete its dialog when prompted.
+
+
+
+
+
+
+
+
+ Configure ImageUploadHandler in the host application instead of configuring a browser endpoint. The Upload image tab is conditional: editors without this callback intentionally show only Image URL. This shared demo supplies the callback, accepts JPEG, PNG, WebP, and GIF files up to 5 MB, returns a trusted temporary HTTPS preview URL, and exposes callback counts so rejected files can be distinguished from host-handler failures. The selectable outcomes also demonstrate cancellation and domain policy rejection.
+
+ How to use:
+
+
+
Set ImageUploadHandler, the allowed raster types, size limit, and optional HTTPS domain allow-list.
+
Open the Image dialog, choose Upload image, and select a valid local raster image.
+
Review the preview and accessibility options before insertion; use the simulated outcomes to observe host failure, cancellation, and URL-policy feedback.
+
+
+
+
+
+
+
+
+ Use Disabled when rich text should remain visible for review. Editing is disabled: users cannot change the content or invoke a toolbar action.
+
+ How to use:
+
+
+
Provide the rich text through Value.
+
Set Disabled to true when editing is disabled.
+
Keep the visible content as context; hovering the inactive toolbar explains that editing is disabled, and no toolbar action is available.
+
+
+
+
+
+
+
+
+ Use ValueExpression inside an EditForm to validate the editor's plain-text content while retaining its HTML separately for submission. Keep Disabled set to false while users edit content and use a toolbar action.
+
+ How to use:
+
+
+
Add DataAnnotationsValidator and a ValidationMessage for the model property.
+
Set ValueExpression to the validated model property and update that property from ValueChanged.
+
Keep editing enabled, then delete the editor content and submit to see required validation feedback before entering content and submitting again.
+
+
+
+
+
+
+
+
+ Use ValueChanged to react to committed content and show its text metrics in surrounding UI. Keep Disabled set to false while observing edits and toolbar actions. This typing-focused example deliberately reports the callback without assigning its HTML back to the editor value.
+
+ How to use:
+
+
+
Handle ValueChanged to receive sanitized HTML, plain text, and count metrics after an edit is committed.
+
Update external UI such as metrics or a save indicator without writing the callback HTML back into the active editor value.
+
Edit the text or use a toolbar action, then observe the committed word and character counts.
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_02_Article_Draft.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_02_Article_Draft.razor
new file mode 100644
index 000000000..0a7c2972b
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_02_Article_Draft.razor
@@ -0,0 +1,22 @@
+
+
+
+
+@code {
+ private string content = "
June release notes
This draft needs a clear structure before it is published.
Highlight the most important update, then organize the remaining details for readers.
Improved editor workflow
Updated content guidance
";
+
+ private readonly RichTextEditorToolbarItem[] toolbarItems =
+ {
+ RichTextEditorToolbarItem.Heading2,
+ RichTextEditorToolbarItem.Bold,
+ RichTextEditorToolbarItem.Italic,
+ RichTextEditorToolbarItem.TextColor,
+ RichTextEditorToolbarItem.AlignLeft,
+ RichTextEditorToolbarItem.AlignCenter,
+ RichTextEditorToolbarItem.OrderedList,
+ RichTextEditorToolbarItem.UnorderedList,
+ RichTextEditorToolbarItem.Blockquote
+ };
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_03_Publish_Rich_Update.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_03_Publish_Rich_Update.razor
new file mode 100644
index 000000000..aebd36f88
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_03_Publish_Rich_Update.razor
@@ -0,0 +1,18 @@
+
+
+
+
+@code {
+ private string content = "
Service update
We have published the latest service update. Add the supporting link, image, or availability table before sharing it.
";
+
+ private readonly RichTextEditorToolbarItem[] toolbarItems =
+ {
+ RichTextEditorToolbarItem.Link,
+ RichTextEditorToolbarItem.Image,
+ RichTextEditorToolbarItem.HorizontalRule,
+ RichTextEditorToolbarItem.Table,
+ RichTextEditorToolbarItem.Fullscreen
+ };
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_04_Disabled.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_04_Disabled.razor
new file mode 100644
index 000000000..c66355d6a
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_04_Disabled.razor
@@ -0,0 +1,5 @@
+
Change this project update and pause briefly to commit the editor value.
";
+
+ private string content = editorInitialContent;
+ private string lastChange = "No committed change yet.";
+
+ private Task OnValueChanged(RichTextEditorChange change)
+ {
+ content = change.Html; // Updates the external preview only.
+ lastChange = $"Committed {change.WordCount} words and {change.CharacterCount} characters.";
+ return Task.CompletedTask;
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_07_Image_Upload_Handler.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_07_Image_Upload_Handler.razor
new file mode 100644
index 000000000..5090b145c
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/RichTextEditor/RichTextEditor_Demo_07_Image_Upload_Handler.razor
@@ -0,0 +1,62 @@
+
+
+
+
+
+
+
+
This editor shows Upload image because it supplies ImageUploadHandler; editors without that callback show only Image URL. Invalid, too-large, or unsupported files are rejected before this callback is invoked.
Choose the image command, then use the host-controlled upload flow.
";
+ private string hostStatus = "No host callback has been invoked yet.";
+ private string selectedOutcome = "success";
+
+ private async Task UploadImageAsync(RichTextEditorImageUploadRequest request)
+ {
+ callbackCount++;
+ hostStatus = $"The host received {request.File.Name}. It must authorize, revalidate, scan, and store the upload before returning a temporary HTTPS URL.";
+ await InvokeAsync(StateHasChanged);
+
+ request.CancellationToken.ThrowIfCancellationRequested();
+
+ switch (selectedOutcome)
+ {
+ case "failure":
+ throw new InvalidOperationException("Simulated host upload failure.");
+ case "cancellation":
+ hostStatus = "The host callback is waiting. Close the Image modal or select another file to cancel it.";
+ await InvokeAsync(StateHasChanged);
+ await Task.Delay(Timeout.InfiniteTimeSpan, request.CancellationToken);
+ return null;
+ case "off-policy-url":
+ return new RichTextEditorImageUploadResult("https://example.com/untrusted-image.png");
+ default:
+ return new RichTextEditorImageUploadResult(successImageUrl);
+ }
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/Switch/SwitchDocumentation.razor
similarity index 82%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/Switch/SwitchDocumentation.razor
index 5007a50b4..a70af4256 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/Switch/SwitchDocumentation.razor
@@ -1,17 +1,16 @@
@page "/switch"
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
@@ -46,7 +45,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Switch_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Switch;
private const string pageTitle = "Blazor Switch";
private const string pageDescription = "Create consistent cross-browser and cross-device checkboxes with our blazor switches. A switch has the markup of a custom checkbox.";
private const string metaTitle = "Blazor Switch Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/Switch_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/Switch/Switch_Demo_01_Basic_Usage.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/Switch_Demo_01_Basic_Usage.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/Switch/Switch_Demo_01_Basic_Usage.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/Switch_Demo_02_A_Disable.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/Switch/Switch_Demo_02_A_Disable.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/Switch_Demo_02_A_Disable.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/Switch/Switch_Demo_02_A_Disable.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/Switch_Demo_02_B_Disable.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/Switch/Switch_Demo_02_B_Disable.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/Switch_Demo_02_B_Disable.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/Switch/Switch_Demo_02_B_Disable.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/Switch_Demo_03_Reverse.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/Switch/Switch_Demo_03_Reverse.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/Switch_Demo_03_Reverse.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/Switch/Switch_Demo_03_Reverse.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/Switch/Switch_Demo_04_Events_Value_Changed.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/Switch_Demo_05_Form.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/Switch/Switch_Demo_05_Form.razor
similarity index 94%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/Switch_Demo_05_Form.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/Switch/Switch_Demo_05_Form.razor
index 4c9fec7d7..3b8fe39ec 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/Switch_Demo_05_Form.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/Switch/Switch_Demo_05_Form.razor
@@ -1,19 +1,5 @@
@using System.ComponentModel.DataAnnotations
-
-
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TextAreaInput/TextAreaInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TextAreaInput/TextAreaInputDocumentation.razor
new file mode 100644
index 000000000..fffab5362
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TextAreaInput/TextAreaInputDocumentation.razor
@@ -0,0 +1,60 @@
+@page "/text-area-input"
+
+@attribute [Route(pageUrl)]
+@layout DemosMainLayout
+
+
+
+
+
+
+
+
+
+
+
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.
+
+
+
+
+
Use the Disabled parameter to disable the TextAreaInput.
+
+
Also, use Enable() and Disable() methods to enable and disable the TextAreaInput.
+
+ Do not use both the Disabled parameter and Enable() & Disable() methods.
+
+
+
+
+
+
Use the MaxLength parameter to set the maximum length of the TextAreaInput.
+
+
+
+
+
+ Like any other blazor input component, TextAreaInput supports validations.
+ Add the DataAnnotations on the TextAreaInput component to validate the user input before submitting the form.
+ In the below example, we used Required attribute.
+
+
+
+
+
+
This event fires when the TextAreaInput value changes, but not on every keystroke.
+
+
+
+@code {
+ private const string pageUrl = DemoRouteConstants.Demos_URL_TextAreaInput;
+ private const string pageTitle = "Blazor TextAreaInput";
+ private const string pageDescription = "The Blazor Bootstrap TextAreaInput component provides a multi-line plain-text editing control, ideal for scenarios requiring users to input substantial amounts of free-form text. Common use cases include comment sections on reviews or review descriptions, or feedback forms.";
+ private const string metaTitle = "Blazor TextAreaInput Component";
+ private const string metaDescription = "The Blazor Bootstrap TextAreaInput component provides a multi-line plain-text editing control, ideal for scenarios requiring users to input substantial amounts of free-form text. Common use cases include comment sections on reviews or review descriptions, or feedback forms.";
+ private const string imageUrl = "https://i.imgur.com/aSVKMqv.png";
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TextAreaInput/TextAreaInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TextAreaInput/TextAreaInput_Demo_01_Basic_Usage.razor
new file mode 100644
index 000000000..9f919c39e
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TextAreaInput/TextAreaInput_Demo_01_Basic_Usage.razor
@@ -0,0 +1,8 @@
+
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.
+
+
+
+
+
Use the Disabled parameter to disable the TextInput.
+
+
Also, use Enable() and Disable() methods to enable and disable the TextInput.
+
+ Do not use both the Disabled parameter and Enable() & Disable() methods.
+
+
+
+
+
+
Use the MaxLength parameter to set the maximum length of the TextInput.
+
+
+
+
+
+ Like any other blazor input component, TextInput supports validations.
+ Add the DataAnnotations on the TextInput component to validate the user input before submitting the form.
+ In the below example, we used Required attribute.
+
+
+
+
+
+
This event fires when the TextInput value changes, but not on every keystroke.
+
+
+
+@code {
+ private const string pageUrl = DemoRouteConstants.Demos_URL_TextInput;
+ private const string pageTitle = "Blazor TextInput";
+ private const string pageDescription = "The Blazor Bootstrap TextInput component is constructed using an HTML input of type 'text'.";
+ private const string metaTitle = "Blazor TextInput Component";
+ private const string metaDescription = "The Blazor Bootstrap TextInput component is constructed using an HTML input of type 'text'.";
+ private const string imageUrl = "https://i.imgur.com/N2VUHIn.png";
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TextInput/TextInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TextInput/TextInput_Demo_01_Basic_Usage.razor
new file mode 100644
index 000000000..7153b870c
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TextInput/TextInput_Demo_01_Basic_Usage.razor
@@ -0,0 +1,8 @@
+
+
+
+
+@code {
+ private Employee employee = new();
+ private EditContext? editContext;
+
+ protected override void OnInitialized()
+ {
+ editContext = new EditContext(employee);
+ base.OnInitialized();
+ }
+
+ public void HandleOnValidSubmit()
+ {
+ // additional check
+ if (editContext.Validate())
+ {
+ // do something
+ // submit the form
+ Console.WriteLine("Form submitted successfully");
+ }
+ }
+
+ private void ResetForm()
+ {
+ employee = new();
+ editContext = new EditContext(employee);
+ }
+
+ public class Employee
+ {
+ [Required(ErrorMessage = "First name required.")]
+ public string? FirstName { get; set; }
+
+ [Required(ErrorMessage = "Last name required.")]
+ public string? LastName { get; set; }
+ }
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TextInput/TextInput_Demo_06_Events_ValueChanged.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TextInput/TextInput_Demo_06_Events_ValueChanged.razor
new file mode 100644
index 000000000..32832d708
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TextInput/TextInput_Demo_06_Events_ValueChanged.razor
@@ -0,0 +1,15 @@
+
+
+
+
Entered employee name: @employeeName
+
+@code {
+ private string? employeeName = null;
+
+ private void EmployeeNameChanged(string? value)
+ {
+ employeeName = value;
+
+ // do something
+ }
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInputDocumentation.razor
similarity index 90%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInputDocumentation.razor
index ca30dd5e3..8333d851c 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInputDocumentation.razor
@@ -1,17 +1,16 @@
@page "/time-input"
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
@@ -76,7 +75,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_TimeInput_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_TimeInput;
private const string pageTitle = "Blazor TimeInput";
private const string pageDescription = "The Blazor Bootstrap TimeInput component is constructed using an HTML input of type 'time' which limits user input based on pre-defined parameters. This component enables users to input a time using a text box with validation or a special time picker interface.";
private const string metaTitle = "Blazor TimeInput Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_01_Basic_Usage.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_01_Basic_Usage.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_01_Basic_Usage.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_01_Basic_Usage.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_02_Generic_Type.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_02_Generic_Type.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_02_Generic_Type.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_02_Generic_Type.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_03_Max_Min.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_03_Max_Min.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_03_Max_Min.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_03_Max_Min.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_04_A_Disable.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_04_A_Disable.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_04_A_Disable.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_04_A_Disable.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_04_B_Disable.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_04_B_Disable.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_04_B_Disable.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_04_B_Disable.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_05_Validations.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_05_Validations.razor
similarity index 94%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_05_Validations.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_05_Validations.razor
index d5f0b6901..3f72576f9 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_05_Validations.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_05_Validations.razor
@@ -1,19 +1,5 @@
@using System.ComponentModel.DataAnnotations
-
-
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_06_Events_Value_Changed.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_06_Events_Value_Changed.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_06_Events_Value_Changed.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_06_Events_Value_Changed.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_07_Restrict_The_Time_Field_Based_On_The_Entry_In_Another_Time_Field.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_07_Restrict_The_Time_Field_Based_On_The_Entry_In_Another_Time_Field.razor
similarity index 94%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_07_Restrict_The_Time_Field_Based_On_The_Entry_In_Another_Time_Field.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_07_Restrict_The_Time_Field_Based_On_The_Entry_In_Another_Time_Field.razor
index 9a97fff3f..24f51cd3a 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInput_Demo_07_Restrict_The_Time_Field_Based_On_The_Entry_In_Another_Time_Field.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Form/TimeInput/TimeInput_Demo_07_Restrict_The_Time_Field_Based_On_The_Entry_In_Another_Time_Field.razor
@@ -1,19 +1,5 @@
@using System.ComponentModel.DataAnnotations
-
-
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/GettingStarted/GettingStartedDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/GettingStarted/GettingStartedDocumentation.razor
new file mode 100644
index 000000000..1aa03ba73
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/GettingStarted/GettingStartedDocumentation.razor
@@ -0,0 +1,35 @@
+@page "/demos"
+@page "/getting-started/blazor-webassembly"
+@page "/getting-started/blazor-server"
+@page "/getting-started/maui-blazor"
+@attribute [Route(pageUrl)]
+@layout DemosMainLayout
+
+
+
+
+
+
+
+@code {
+ private const string pageUrl = DemoRouteConstants.Demos_URL_GettingStarted;
+ private const string pageTitle = "Getting started with Blazor Bootstrap - Blazor Project Setup";
+ private const string pageDescription = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers.";
+ private const string metaTitle = "Getting started with Blazor Bootstrap - Blazor Project Setup";
+ private const string metaDescription = "High-performance, lightweight, and responsive blazor bootstrap components in a single package from the developers for the developers.";
+ private const string imageUrl = "https://i.imgur.com/SCbZVd4.jpg"; // TODO: Update image URL
+
+ private string? version;
+ [Inject] public IConfiguration Configuration { get; set; } = default!;
+
+ protected override void OnInitialized()
+ {
+ version = Configuration["version"]; // example: v3.5.0
+ base.OnInitialized();
+ }
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor
similarity index 93%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor
index 1cd6dcb42..4bd565772 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor
@@ -1,20 +1,21 @@
-
+ SelectionMode="GridSelectionMode.Multiple">
@context.Id
-
+
@context.Name
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_02_Server_Side_Filtering_Paging_And_Sorting.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/01-Overview/Grid_Demo_02_Server_Side_Filtering_Paging_And_Sorting.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_02_Server_Side_Filtering_Paging_And_Sorting.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/01-Overview/Grid_Demo_02_Server_Side_Filtering_Paging_And_Sorting.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Overview_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/01-Overview/Grid_Overview_Documentation.razor
similarity index 72%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Overview_Documentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/01-Overview/Grid_Overview_Documentation.razor
index adf4edaa6..b44a816b3 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Overview_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/01-Overview/Grid_Overview_Documentation.razor
@@ -1,17 +1,16 @@
@page "/grid"
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
@@ -22,7 +21,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Grid_Overview_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Grid_Overview;
private const string pageTitle = "Blazor Grid";
private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.";
private const string metaTitle = "Blazor Grid Component";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_DataBinding_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/02-data-binding/Grid_DataBinding_Documentation.razor
similarity index 82%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_DataBinding_Documentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/02-data-binding/Grid_DataBinding_Documentation.razor
index 238af3097..0db50c978 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_DataBinding_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/02-data-binding/Grid_DataBinding_Documentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
Assign a collection to the Data parameter to render the grid dynamically. The example below will render different department employees in the individual grid.
@@ -31,7 +30,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Grid_DataBinding_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Grid_DataBinding;
private const string pageTitle = "Blazor Grid - Data binding";
private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.";
private const string metaTitle = "Blazor Grid Component - Data binding";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_Demo_01_Data_Parameter_Assign_Collection.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/02-data-binding/Grid_Demo_01_Data_Parameter_Assign_Collection.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_Demo_01_Data_Parameter_Assign_Collection.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/02-data-binding/Grid_Demo_01_Data_Parameter_Assign_Collection.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_Demo_02_Data_Parameter_Update_Collection.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/02-data-binding/Grid_Demo_02_Data_Parameter_Update_Collection.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/02-data-binding/Grid_Demo_02_Data_Parameter_Update_Collection.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/02-data-binding/Grid_Demo_02_Data_Parameter_Update_Collection.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_01_A_Client_Side_Filtering.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Demo_01_A_Client_Side_Filtering.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_01_A_Client_Side_Filtering.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Demo_01_A_Client_Side_Filtering.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Demo_01_B_Client_Side_Filtering_With_StringComparision.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_02_Set_Default_Filter.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Demo_02_Set_Default_Filter.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_02_Set_Default_Filter.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Demo_02_Set_Default_Filter.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_03_Disable_Specific_Column_Filter.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Demo_03_Disable_Specific_Column_Filter.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_03_Disable_Specific_Column_Filter.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Demo_03_Disable_Specific_Column_Filter.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_04_Increase_Filter_Textbox_Width.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Demo_04_Increase_Filter_Textbox_Width.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_04_Increase_Filter_Textbox_Width.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Demo_04_Increase_Filter_Textbox_Width.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_05_Enum_Filters.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Demo_05_Enum_Filters.razor
similarity index 87%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_05_Enum_Filters.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Demo_05_Enum_Filters.razor
index f642a5b1d..ba0ae61ba 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_05_Enum_Filters.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Demo_05_Enum_Filters.razor
@@ -1,4 +1,6 @@
-
- @context.Status
+ @(typeof(UserStatus).GetDisplayName(context.Status.ToString()))
@@ -60,7 +62,15 @@
public enum UserStatus
{
Registered,
+
+ [Display(Name = nameof(UserStatusLabels.VerificationPending), ResourceType = typeof(UserStatusLabels))]
VerificationPending,
+
Verified
}
-}
\ No newline at end of file
+
+ public static class UserStatusLabels
+ {
+ public static string VerificationPending => "Pending Verification";
+ }
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_06_Guid_Filters.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Demo_06_Guid_Filters.razor
similarity index 93%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_06_Guid_Filters.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Demo_06_Guid_Filters.razor
index 9d226d025..16c622a18 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_06_Guid_Filters.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Demo_06_Guid_Filters.razor
@@ -1,4 +1,6 @@
-
- @context.Status
+ @(typeof(UserStatus).GetDisplayName(context.Status.ToString()))
@@ -64,6 +66,7 @@
public enum UserStatus
{
Registered,
+ [Display(Name = "Pending Verification")]
VerificationPending,
Verified
}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Filters_Documentation.razor
similarity index 86%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Filters_Documentation.razor
index 5b2854421..64823563a 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/03-filters/Grid_Filters_Documentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
For filtering, AllowFiltering and PropertyName parameters are required.
@@ -58,6 +57,7 @@
+
Enum filter labels use DisplayAttribute.GetName() when a DisplayAttribute is present, including resource-backed names, and fall back to the enum member name.
@@ -66,7 +66,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Grid_Filters_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Grid_Filters;
private const string pageTitle = "Blazor Grid - Filters";
private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.";
private const string metaTitle = "Blazor Grid Component - Filters";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_02_Client_Side_Paging.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/04-paging/Grid_Demo_01_Client_Side_Paging.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_02_Client_Side_Paging.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/04-paging/Grid_Demo_01_Client_Side_Paging.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_25_Dynamic_Page_Size.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/04-paging/Grid_Demo_02_Dynamic_Page_Size.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_25_Dynamic_Page_Size.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/04-paging/Grid_Demo_02_Dynamic_Page_Size.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_26_Page_Size_Selection.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/04-paging/Grid_Demo_03_Page_Size_Selection.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_26_Page_Size_Selection.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/04-paging/Grid_Demo_03_Page_Size_Selection.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_34_AutoHide_Paging.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/04-paging/Grid_Demo_04_AutoHide_Paging.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Demo_34_AutoHide_Paging.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/04-paging/Grid_Demo_04_AutoHide_Paging.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/04-paging/Grid_Demo_05_Dynamic_Pagination.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/04-paging/Grid_Demo_05_Dynamic_Pagination.razor
new file mode 100644
index 000000000..212c780a7
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/04-paging/Grid_Demo_05_Dynamic_Pagination.razor
@@ -0,0 +1,96 @@
+
+
+
+
+
+
+
+
+
+ @context.Id
+
+
+ @context.Name
+
+
+ @context.Designation
+
+
+ @context.DOJ
+
+
+ @context.IsActive
+
+
+
+
+
+@code {
+ Grid grid = default!;
+ private List? employees = default!;
+
+ private async Task> EmployeesDataProvider(GridDataProviderRequest request)
+ {
+ if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
+ employees = GetEmployees(); // call a service or an API to pull the employees
+
+ return await Task.FromResult(request.ApplyTo(employees));
+ }
+
+ private List GetEmployees()
+ {
+ return new List
+ {
+ new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
+ new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
+ new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
+ new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
+ new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
+ new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
+ new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
+ new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
+ new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
+ new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
+ new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
+ new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
+ };
+ }
+
+ private async Task AddEmployee()
+ {
+ if(employees is null)
+ employees = new();
+
+ // for the same employees collection, we are adding an object
+ // explicit grid refresh required
+ employees.Add(CreateEmployee());
+ await grid.RefreshDataAsync();
+ }
+
+ private Employee1 CreateEmployee()
+ {
+ var emp = new Employee1();
+ emp.Id = (employees?.Any() ?? false) ? employees.Max(x => x.Id) + 1 : 1;
+ emp.Name = $"Employee {emp.Id}";
+ emp.Designation = $"QA Engineer {emp.Id}";
+ emp.DOJ = new DateOnly(new Random().Next(1970, 2000), new Random().Next(1, 12), new Random().Next(1, 25));
+ emp.IsActive = true;
+ return emp;
+ }
+
+ private async Task RemoveEmployee()
+ {
+ if (employees!.Count > 0)
+ employees!.Remove(employees.Last());
+
+ await grid.RefreshDataAsync();
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/04-paging/Grid_Paging_Documentation.razor
similarity index 63%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/04-paging/Grid_Paging_Documentation.razor
index 959fe0faf..f70e02312 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/04-paging/Grid_Paging_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/04-paging/Grid_Paging_Documentation.razor
@@ -1,39 +1,42 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
For paging, AllowPaging and PageSize parameters are required.
Add AllowPaging="true" and PageSize="20" parameters to the Grid. PageSize parameter is optional.
The default page size is 10.
-
+
-
+
-
+
-
+
+
+
+
+
@code {
- private const string pageUrl = RouteConstants.Demos_Grid_Paging_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Grid_Paging;
private const string pageTitle = "Blazor Grid - Paging";
private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.";
private const string metaTitle = "Blazor Grid Component - Paging";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Demo_03_Client_Side_Sorting.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/05-sorting/Grid_Demo_03_Client_Side_Sorting.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Demo_03_Client_Side_Sorting.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/05-sorting/Grid_Demo_03_Client_Side_Sorting.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Demo_08_Default_Sorting.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/05-sorting/Grid_Demo_08_Default_Sorting.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Demo_08_Default_Sorting.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/05-sorting/Grid_Demo_08_Default_Sorting.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Demo_09_Disable_Specific_Column_Sorting.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/05-sorting/Grid_Demo_09_Disable_Specific_Column_Sorting.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Demo_09_Disable_Specific_Column_Sorting.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/05-sorting/Grid_Demo_09_Disable_Specific_Column_Sorting.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/05-sorting/Grid_Sorting_Documentation.razor
similarity index 84%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/05-sorting/Grid_Sorting_Documentation.razor
index 256ed0b4d..ce108676c 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/05-sorting/Grid_Sorting_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/05-sorting/Grid_Sorting_Documentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
For sorting, AllowSorting and SortKeySelector parameters are required.
@@ -31,7 +30,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Grid_Sorting_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Grid_Sorting;
private const string pageTitle = "Blazor Grid - Sorting";
private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.";
private const string metaTitle = "Blazor Grid Component - Sorting";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_01_Selection.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/06-selection/Grid_Demo_01_A_Selection.razor
similarity index 92%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_01_Selection.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/06-selection/Grid_Demo_01_A_Selection.razor
index 35b337d05..85bd2d09c 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_01_Selection.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/06-selection/Grid_Demo_01_A_Selection.razor
@@ -2,7 +2,7 @@
Class="table table-hover table-bordered"
DataProvider="EmployeesDataProvider"
AllowSelection="true"
- SelectedItemsChanged="OnSelectedItemsChanged"
+ @bind-SelectedItems="@selectedEmployees"
Responsive="true">
@@ -69,10 +69,4 @@
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
};
}
-
- private Task OnSelectedItemsChanged(HashSet employees)
- {
- selectedEmployees = employees is not null && employees.Any() ? employees : new();
- return Task.CompletedTask;
- }
}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/06-selection/Grid_Demo_01_B_Default_Selection.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/06-selection/Grid_Demo_01_B_Default_Selection.razor
new file mode 100644
index 000000000..95275229c
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/06-selection/Grid_Demo_01_B_Default_Selection.razor
@@ -0,0 +1,74 @@
+
+
+
+
+ @context.Id
+
+
+ @context.Name
+
+
+ @context.Designation
+
+
+ @context.DOJ
+
+
+ @context.IsActive
+
+
+
+
+
+
+
+@code {
+ private Grid gridRef;
+ private IEnumerable employees = default!;
+
+ private HashSet selectedEmployees = new();
+
+ private async Task> EmployeesDataProvider(GridDataProviderRequest request)
+ {
+ Console.WriteLine("EmployeesDataProvider called...");
+
+ if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
+ employees = GetEmployees(); // call a service or an API to pull the employees
+
+ return await Task.FromResult(request.ApplyTo(employees));
+ }
+
+ private IEnumerable GetEmployees()
+ {
+ return new List
+ {
+ new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
+ new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
+ new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
+ new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
+ new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
+ new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
+ new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
+ new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
+ new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
+ };
+ }
+
+ private Task OnSelectedItemsChanged(HashSet employees)
+ {
+ selectedEmployees = employees is not null && employees.Any() ? employees : new();
+ return Task.CompletedTask;
+ }
+
+ private Task SelectAllEmployees() => gridRef.SelectAllItemsAsync();
+
+ private Task UnselectAllEmployees() => gridRef.UnSelectAllItemsAsync();
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_03_Disable_Selection.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/06-selection/Grid_Demo_03_Disable_Selection.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_03_Disable_Selection.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/06-selection/Grid_Demo_03_Disable_Selection.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_04_A_Change_Selected_Row_Background_Color.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/06-selection/Grid_Demo_04_A_Change_Selected_Row_Background_Color.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_04_A_Change_Selected_Row_Background_Color.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/06-selection/Grid_Demo_04_A_Change_Selected_Row_Background_Color.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_04_B_Selected_Row_CSS_Variables.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/06-selection/Grid_Demo_04_B_Selected_Row_CSS_Variables.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Demo_04_B_Selected_Row_CSS_Variables.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/06-selection/Grid_Demo_04_B_Selected_Row_CSS_Variables.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/06-selection/Grid_Selection_Documentation.razor
similarity index 62%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/06-selection/Grid_Selection_Documentation.razor
index a2c2fc9a2..0e36415a6 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/06-selection/Grid_Selection_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/06-selection/Grid_Selection_Documentation.razor
@@ -1,29 +1,46 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
Set AllowSelection="true" to enable the selection on the Grid.
By default, SelectionMode is Single.
-
+
+
+
+
+
+ Set AllowSelection="true" to enable the selection on the Grid.
+ By default, SelectionMode is Single.
+
+
-
+
To select multiple rows, set SelectionMode="GridSelectionMode.Multiple".
-
+
+
+
Selected items are removed from the selection if they are not rendered after paging, sorting, filtering, etc.
+
+
+
+
+
+ Select or unselect all the items programatically by calling the SelectAllItemsAsync() and UnSelectAllItemsAsync() methods. Also, set SelectionMode="GridSelectionMode.Multiple".
+
+
Selected items are removed from the selection if they are not rendered after paging, sorting, filtering, etc.
@@ -48,7 +65,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Grid_Selection_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Grid_Selection;
private const string pageTitle = "Blazor Grid - Selection";
private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.";
private const string metaTitle = "Blazor Grid Component - Selection";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/07-alignment/Grid_Alignment_Documentation.razor
similarity index 78%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/07-alignment/Grid_Alignment_Documentation.razor
index 491475b2b..b46ca9472 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Alignment_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/07-alignment/Grid_Alignment_Documentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
Use the HeaderTextAlignment parameter to change the header column alignment. By default, HeaderTextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End.
@@ -22,7 +21,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Grid_Alignment_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Grid_Alignment;
private const string pageTitle = "Blazor Grid - Alignment";
private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.";
private const string metaTitle = "Blazor Grid Component - Alignment";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Demo_10_Header_Text_Alignment.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/07-alignment/Grid_Demo_10_Header_Text_Alignment.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Demo_10_Header_Text_Alignment.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/07-alignment/Grid_Demo_10_Header_Text_Alignment.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Demo_11_Grid_Cell_Alignment.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/07-alignment/Grid_Demo_11_Grid_Cell_Alignment.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/07-alignment/Grid_Demo_11_Grid_Cell_Alignment.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/07-alignment/Grid_Demo_11_Grid_Cell_Alignment.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_Demo_16_Save_And_Load_Grid_Settings.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/08-grid-settings/Grid_Demo_16_Save_And_Load_Grid_Settings.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_Demo_16_Save_And_Load_Grid_Settings.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/08-grid-settings/Grid_Demo_16_Save_And_Load_Grid_Settings.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor
similarity index 77%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor
index 9769c0440..b5baffa7c 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/08-grid-settings/Grid_GridSettings_Documentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
This example shows how to save/load the Grid state. The state includes the page number, page size, and filters.
@@ -19,7 +18,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Grid_Settings_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Grid_Settings;
private const string pageTitle = "Blazor Grid - Settings";
private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.";
private const string metaTitle = "Blazor Grid Component - Settings";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor
similarity index 84%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor
index 5665dd992..d6e32dc92 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/09-custom-css-class/Grid_CustomCSSClass_Documentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
In the below example, we applied table-danger CSS class to the row where the employee is inactive and the table-success CSS class to the row where the employee designation is Architect.
@@ -37,7 +36,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Grid_CustomCSSClass_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Grid_CustomCSSClass;
private const string pageTitle = "Blazor Grid - Custom CSS Class";
private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.";
private const string metaTitle = "Blazor Grid Component - Custom CSS Class";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_Demo_18_Specify_Custom_Row_Class.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/09-custom-css-class/Grid_Demo_18_Specify_Custom_Row_Class.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_Demo_18_Specify_Custom_Row_Class.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/09-custom-css-class/Grid_Demo_18_Specify_Custom_Row_Class.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_Demo_19_Specify_Custom_Column_Class.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/09-custom-css-class/Grid_Demo_19_Specify_Custom_Column_Class.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_Demo_19_Specify_Custom_Column_Class.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/09-custom-css-class/Grid_Demo_19_Specify_Custom_Column_Class.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_Demo_20_Column_Css_Class.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/09-custom-css-class/Grid_Demo_20_Column_Css_Class.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_Demo_20_Column_Css_Class.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/09-custom-css-class/Grid_Demo_20_Column_Css_Class.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_Demo_27_Header_Row_CSS_Class.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/09-custom-css-class/Grid_Demo_27_Header_Row_CSS_Class.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_Demo_27_Header_Row_CSS_Class.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/09-custom-css-class/Grid_Demo_27_Header_Row_CSS_Class.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_Demo_28_Filters_Row_CSS_Class.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/09-custom-css-class/Grid_Demo_28_Filters_Row_CSS_Class.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/09-custom-css-class/Grid_Demo_28_Filters_Row_CSS_Class.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/09-custom-css-class/Grid_Demo_28_Filters_Row_CSS_Class.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Demo_29_Row_Click.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/10-events/Grid_Demo_29_Row_Click.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Demo_29_Row_Click.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/10-events/Grid_Demo_29_Row_Click.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Demo_30_Row_Double_Click.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/10-events/Grid_Demo_30_Row_Double_Click.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Demo_30_Row_Double_Click.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/10-events/Grid_Demo_30_Row_Double_Click.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/10-events/Grid_Events_Documentation.razor
similarity index 70%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/10-events/Grid_Events_Documentation.razor
index 3da3389f2..2cb459283 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/10-events/Grid_Events_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/10-events/Grid_Events_Documentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
@@ -22,7 +21,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Grid_Events_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Grid_Events;
private const string pageTitle = "Blazor Grid - Events";
private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.";
private const string metaTitle = "Blazor Grid Component - Events";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Demo_01_Translations.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/11-translations/Grid_Demo_01_Translations.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Demo_01_Translations.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/11-translations/Grid_Demo_01_Translations.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/11-translations/Grid_Translations_Documentation.razor
similarity index 68%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/11-translations/Grid_Translations_Documentation.razor
index 7fae7fe21..b355d39c8 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/11-translations/Grid_Translations_Documentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
In the example below, you will see translations related to pagination and filters in Dutch.
@@ -17,7 +16,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Grid_Translations_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Grid_Translations;
private const string pageTitle = "Blazor Grid - Translations";
private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.";
private const string metaTitle = "Blazor Grid Component - Translations";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_Demo_32_Fixed_Header_A.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/12-fixed-header/Grid_Demo_32_Fixed_Header_A.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_Demo_32_Fixed_Header_A.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/12-fixed-header/Grid_Demo_32_Fixed_Header_A.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_Demo_32_Fixed_Header_B_With_Filters.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/12-fixed-header/Grid_Demo_32_Fixed_Header_B_With_Filters.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_Demo_32_Fixed_Header_B_With_Filters.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/12-fixed-header/Grid_Demo_32_Fixed_Header_B_With_Filters.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor
similarity index 74%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor
index 7ba88932c..d6b82cbf2 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/12-fixed-header/Grid_FixedHeader_Documentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
@@ -24,7 +23,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Grid_FixedHeader_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Grid_FixedHeader;
private const string pageTitle = "Blazor Grid - Fixed header";
private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.";
private const string metaTitle = "Blazor Grid Component - Fixed header";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_Demo_33_Freeze_Column_A_Text_Nowrap.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/13-freeze-columns/Grid_Demo_33_Freeze_Column_A_Text_Nowrap.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_Demo_33_Freeze_Column_A_Text_Nowrap.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/13-freeze-columns/Grid_Demo_33_Freeze_Column_A_Text_Nowrap.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_Demo_33_Freeze_Column_B_Fixed_Header.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/13-freeze-columns/Grid_Demo_33_Freeze_Column_B_Fixed_Header.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_Demo_33_Freeze_Column_B_Fixed_Header.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/13-freeze-columns/Grid_Demo_33_Freeze_Column_B_Fixed_Header.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_Demo_33_Freeze_Column_C_Fixed_Header_With_Filters.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/13-freeze-columns/Grid_Demo_33_Freeze_Column_C_Fixed_Header_With_Filters.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_Demo_33_Freeze_Column_C_Fixed_Header_With_Filters.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/13-freeze-columns/Grid_Demo_33_Freeze_Column_C_Fixed_Header_With_Filters.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor
similarity index 75%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor
index bc3007bfa..0ec67ee61 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/13-freeze-columns/Grid_FreezeColumns_Documentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
@@ -25,7 +24,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Grid_FreezeColumns_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Grid_FreezeColumns;
private const string pageTitle = "Blazor Grid - Freeze columns";
private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.";
private const string metaTitle = "Blazor Grid Component - Freeze columns";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_Demo_14_A_DetailView.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/14-detail-view/Grid_Demo_14_A_DetailView.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_Demo_14_A_DetailView.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/14-detail-view/Grid_Demo_14_A_DetailView.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_Demo_14_B_DetailView_Dynamic_Data.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/14-detail-view/Grid_Demo_14_B_DetailView_Dynamic_Data.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_Demo_14_B_DetailView_Dynamic_Data.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/14-detail-view/Grid_Demo_14_B_DetailView_Dynamic_Data.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/14-detail-view/Grid_DetailView_Documentation.razor
similarity index 74%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/14-detail-view/Grid_DetailView_Documentation.razor
index c7d78be9f..059c2807c 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/14-detail-view/Grid_DetailView_Documentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
To enable detail view, set the AllowDetailView parameter to true. In the following example, existing <GridColumn> tags are nested under <GridColumns> tag to distinguish them from <GridDetailView>.
@@ -22,7 +21,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Grid_DetailView_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Grid_DetailView;
private const string pageTitle = "Blazor Grid - Detail View";
private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.";
private const string metaTitle = "Blazor Grid Component - Detail View";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Demo_15_A_DetialView_Nested_Grid.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/15-nested-grid/Grid_Demo_15_A_DetialView_Nested_Grid.razor
similarity index 100%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Demo_15_A_DetialView_Nested_Grid.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/15-nested-grid/Grid_Demo_15_A_DetialView_Nested_Grid.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/15-nested-grid/Grid_Nested_Documentation.razor
similarity index 72%
rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor
rename to BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/15-nested-grid/Grid_Nested_Documentation.razor
index 061072d92..1192c8c7b 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/15-nested-grid/Grid_Nested_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/15-nested-grid/Grid_Nested_Documentation.razor
@@ -1,15 +1,14 @@
@attribute [Route(pageUrl)]
+@layout DemosMainLayout
-
+
-
- @pageDescription
-
-
-
+
To create a nested grid, we first need to enable the detail view. To enable the detail view, set the AllowDetailView parameter to true. In the following example, existing <GridColumn> tags are nested under <GridColumns> tag to distinguish them from <GridDetailView>.
@@ -17,7 +16,7 @@
@code {
- private const string pageUrl = RouteConstants.Demos_Grid_NestedGrid_Documentation;
+ private const string pageUrl = DemoRouteConstants.Demos_URL_Grid_NestedGrid;
private const string pageTitle = "Blazor Grid - Nested Grid";
private const string pageDescription = "Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.";
private const string metaTitle = "Blazor Grid Component - Nested Grid";
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Demo_01_Summary_Example.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Demo_01_Summary_Example.razor
new file mode 100644
index 000000000..a98ce4b5b
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Demo_01_Summary_Example.razor
@@ -0,0 +1,68 @@
+
+
+
+
+ @context.Id
+
+
+ @context.Name
+
+
+ @context.Designation
+
+
+ @context.DOJ
+
+
+ @context.Salary.ToString("C")
+
+
+ @context.IsActive
+
+
+
+
+@code {
+ private IEnumerable employees = default!;
+
+ private async Task> EmployeesDataProvider(GridDataProviderRequest request)
+ {
+ if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
+ employees = GetEmployees(); // call a service or an API to pull the employees
+
+ return await Task.FromResult(request.ApplyTo(employees));
+ }
+
+ private IEnumerable GetEmployees()
+ {
+ return new List
+ {
+ new Employee { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true },
+ new Employee { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true },
+ new Employee { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true },
+ new Employee { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false },
+ new Employee { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), Salary = 16500.50f, IsActive = true },
+ new Employee { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true },
+ new Employee { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true },
+ new Employee { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), Salary = 13500, IsActive = true },
+ new Employee { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), Salary = 15800.10f, IsActive = true },
+ new Employee { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), Salary = 14000, IsActive = true },
+ new Employee { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true },
+ new Employee { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), Salary = 17850, IsActive = true },
+ };
+ }
+
+ public record class Employee
+ {
+ public int Id { get; set; }
+ public string? Name { get; set; }
+ public string? Designation { get; set; }
+ public DateOnly DOJ { get; set; }
+ public float Salary { get; set; }
+ public bool IsActive { get; set; }
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Demo_02_Summary_with_Filters_Paging.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Demo_02_Summary_with_Filters_Paging.razor
new file mode 100644
index 000000000..103638ed1
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Demo_02_Summary_with_Filters_Paging.razor
@@ -0,0 +1,83 @@
+
+
+
+
+ @context.Id
+
+
+ @context.Name
+
+
+ @context.Designation
+
+
+ @context.DOJ
+
+
+ @context.Salary.ToString("C")
+
+
+ @context.IsActive
+
+
+
+
+@code {
+ private IEnumerable employees = default!;
+
+ private HashSet selectedEmployees = new();
+
+ private async Task> EmployeesDataProvider(GridDataProviderRequest request)
+ {
+ if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
+ employees = GetEmployees(); // call a service or an API to pull the employees
+
+ return await Task.FromResult(request.ApplyTo(employees));
+ }
+
+ private IEnumerable GetEmployees()
+ {
+ return new List
+ {
+ new Employee { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true },
+ new Employee { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true },
+ new Employee { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true },
+ new Employee { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false },
+ new Employee { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), Salary = 16500.50f, IsActive = true },
+ new Employee { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true },
+ new Employee { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true },
+ new Employee { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), Salary = 13500, IsActive = true },
+ new Employee { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), Salary = 15800.10f, IsActive = true },
+ new Employee { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), Salary = 14000, IsActive = true },
+ new Employee { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true },
+ new Employee { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), Salary = 17850, IsActive = true },
+ };
+ }
+
+ private Task OnSelectedItemsChanged(HashSet employees)
+ {
+ selectedEmployees = employees is not null && employees.Any() ? employees : new();
+ return Task.CompletedTask;
+ }
+
+ public record class Employee
+ {
+ public int Id { get; set; }
+ public string? Name { get; set; }
+ public string? Designation { get; set; }
+ public DateOnly DOJ { get; set; }
+ public float Salary { get; set; }
+ public bool IsActive { get; set; }
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Demo_03_Change_Prefix.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Demo_03_Change_Prefix.razor
new file mode 100644
index 000000000..5635a7ebb
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Demo_03_Change_Prefix.razor
@@ -0,0 +1,68 @@
+
+
+
+
+ @context.Id
+
+
+ @context.Name
+
+
+ @context.Designation
+
+
+ @context.DOJ
+
+
+ @context.Salary.ToString("C")
+
+
+ @context.IsActive
+
+
+
+
+@code {
+ private IEnumerable employees = default!;
+
+ private async Task> EmployeesDataProvider(GridDataProviderRequest request)
+ {
+ if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
+ employees = GetEmployees(); // call a service or an API to pull the employees
+
+ return await Task.FromResult(request.ApplyTo(employees));
+ }
+
+ private IEnumerable GetEmployees()
+ {
+ return new List
+ {
+ new Employee { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true },
+ new Employee { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true },
+ new Employee { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true },
+ new Employee { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false },
+ new Employee { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), Salary = 16500.50f, IsActive = true },
+ new Employee { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true },
+ new Employee { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true },
+ new Employee { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), Salary = 13500, IsActive = true },
+ new Employee { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), Salary = 15800.10f, IsActive = true },
+ new Employee { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), Salary = 14000, IsActive = true },
+ new Employee { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true },
+ new Employee { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), Salary = 17850, IsActive = true },
+ };
+ }
+
+ public record class Employee
+ {
+ public int Id { get; set; }
+ public string? Name { get; set; }
+ public string? Designation { get; set; }
+ public DateOnly DOJ { get; set; }
+ public float Salary { get; set; }
+ public bool IsActive { get; set; }
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Demo_04_Remove_Prefix.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Demo_04_Remove_Prefix.razor
new file mode 100644
index 000000000..9c8a1039c
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Demo_04_Remove_Prefix.razor
@@ -0,0 +1,68 @@
+
+
+
+
+ @context.Id
+
+
+ @context.Name
+
+
+ @context.Designation
+
+
+ @context.DOJ
+
+
+ @context.Salary.ToString("C")
+
+
+ @context.IsActive
+
+
+
+
+@code {
+ private IEnumerable employees = default!;
+
+ private async Task> EmployeesDataProvider(GridDataProviderRequest request)
+ {
+ if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
+ employees = GetEmployees(); // call a service or an API to pull the employees
+
+ return await Task.FromResult(request.ApplyTo(employees));
+ }
+
+ private IEnumerable GetEmployees()
+ {
+ return new List
+ {
+ new Employee { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true },
+ new Employee { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true },
+ new Employee { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true },
+ new Employee { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false },
+ new Employee { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), Salary = 16500.50f, IsActive = true },
+ new Employee { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true },
+ new Employee { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true },
+ new Employee { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), Salary = 13500, IsActive = true },
+ new Employee { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), Salary = 15800.10f, IsActive = true },
+ new Employee { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), Salary = 14000, IsActive = true },
+ new Employee { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true },
+ new Employee { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), Salary = 17850, IsActive = true },
+ };
+ }
+
+ public record class Employee
+ {
+ public int Id { get; set; }
+ public string? Name { get; set; }
+ public string? Designation { get; set; }
+ public DateOnly DOJ { get; set; }
+ public float Salary { get; set; }
+ public bool IsActive { get; set; }
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Demo_05_Locale.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Demo_05_Locale.razor
new file mode 100644
index 000000000..eae7c5bb3
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Demo_05_Locale.razor
@@ -0,0 +1,69 @@
+
+
+
+
+ @context.Id
+
+
+ @context.Name
+
+
+ @context.Designation
+
+
+ @context.DOJ
+
+
+ @context.Salary.ToString("C", System.Globalization.CultureInfo.GetCultureInfo("en-IN"))
+
+
+ @context.IsActive
+
+
+
+
+@code {
+ private IEnumerable employees = default!;
+
+ private async Task> EmployeesDataProvider(GridDataProviderRequest request)
+ {
+ if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
+ employees = GetEmployees(); // call a service or an API to pull the employees
+
+ return await Task.FromResult(request.ApplyTo(employees));
+ }
+
+ private IEnumerable GetEmployees()
+ {
+ return new List
+ {
+ new Employee { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), Salary = 7700, IsActive = true },
+ new Employee { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), Salary = 19000, IsActive = true },
+ new Employee { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), Salary = 12000, IsActive = true },
+ new Employee { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), Salary = 19000, IsActive = false },
+ new Employee { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), Salary = 16500.50f, IsActive = true },
+ new Employee { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 24000, IsActive = true },
+ new Employee { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), Salary = 21000, IsActive = true },
+ new Employee { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), Salary = 13500, IsActive = true },
+ new Employee { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), Salary = 15800.10f, IsActive = true },
+ new Employee { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), Salary = 14000, IsActive = true },
+ new Employee { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), Salary = 8000, IsActive = true },
+ new Employee { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), Salary = 17850, IsActive = true },
+ };
+ }
+
+ public record class Employee
+ {
+ public int Id { get; set; }
+ public string? Name { get; set; }
+ public string? Designation { get; set; }
+ public DateOnly DOJ { get; set; }
+ public float Salary { get; set; }
+ public bool IsActive { get; set; }
+ }
+}
\ No newline at end of file
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Summary_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Summary_Documentation.razor
new file mode 100644
index 000000000..0ee023f73
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Grid/16-summary/Grid_Summary_Documentation.razor
@@ -0,0 +1,62 @@
+@attribute [Route(pageUrl)]
+@layout DemosMainLayout
+
+
+
+
+
+
+