Demo.RCK - Section component updates

Author: gvreddy04

BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor

@@ -11,31 +11,31 @@
 
 <CarbonAds />
 
-<Section Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples">
+<Section Size="HeadingSize.H2" Name="Examples" PageUrl="@pageUrl" HashTagName="examples">
     <div>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.</div>
     <Demo Type="typeof(Button_Demo_01_Examples)" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Button tags" PageUrl="@pageUrl" HashTagName="button-tags">
+<Section Size="HeadingSize.H2" Name="Button tags" PageUrl="@pageUrl" HashTagName="button-tags">
     <Demo Type="typeof(Button_Demo_02_Button_Tags)" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Outline buttons" PageUrl="@pageUrl" HashTagName="outline-buttons">
+<Section Size="HeadingSize.H2" Name="Outline buttons" PageUrl="@pageUrl" HashTagName="outline-buttons">
     <Demo Type="typeof(Button_Demo_03_Outline_Buttons)" />
 
     <Callout Color="CalloutColor.Info">
         Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.
     </Callout>
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Sizes" PageUrl="@pageUrl" HashTagName="sizes">
+<Section Size="HeadingSize.H2" Name="Sizes" PageUrl="@pageUrl" HashTagName="sizes">
     <div>Fancy larger or smaller buttons? Add <code>Size="ButtonSize.Large"</code> or <code>Size="ButtonSize.Small"</code> for additional sizes.</div>
     <Demo Type="typeof(Button_Demo_04_Sizes_A)" />
     <Demo Type="typeof(Button_Demo_04_Sizes_B)" />
     <Demo Type="typeof(Button_Demo_04_Sizes_C)" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Disabled state" PageUrl="@pageUrl" HashTagName="disabled-state">
+<Section Size="HeadingSize.H2" Name="Disabled state" PageUrl="@pageUrl" HashTagName="disabled-state">
     <div>Make buttons look inactive by adding the <code>Disabled="true"</code> boolean parameter to any <code>Button</code> component. Disabled buttons have <code>pointer-events: none</code> applied to, preventing hover and active states from triggering.</div>
 
     <Callout Type="CalloutColor.Info">
@@ -46,43 +46,43 @@
     <Demo Type="typeof(Button_Demo_05_Disabled_State_B)" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Disable and enable state dynamically" PageUrl="@pageUrl" HashTagName="disable-and-enable-state-dynamically">
+<Section Size="HeadingSize.H2" Name="Disable and enable state dynamically" PageUrl="@pageUrl" HashTagName="disable-and-enable-state-dynamically">
     <Demo Type="typeof(Button_Demo_13_Disable_Enable_Dynamically)" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Block buttons" PageUrl="@pageUrl" HashTagName="block-buttons">
+<Section Size="HeadingSize.H2" Name="Block buttons" PageUrl="@pageUrl" HashTagName="block-buttons">
     <Demo Type="typeof(Button_Demo_06_Block_Buttons_A)" />
     <Demo Type="typeof(Button_Demo_06_Block_Buttons_B)" />
     <Demo Type="typeof(Button_Demo_06_Block_Buttons_C)" />
     <Demo Type="typeof(Button_Demo_06_Block_Buttons_D)" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Toggle states" PageUrl="@pageUrl" HashTagName="toggle-states">
+<Section Size="HeadingSize.H2" Name="Toggle states" PageUrl="@pageUrl" HashTagName="toggle-states">
     <Demo Type="typeof(Button_Demo_07_Toggle_States_A)" />
     <Demo Type="typeof(Button_Demo_07_Toggle_States_B)" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Loading spinner" PageUrl="@pageUrl" HashTagName="loading-spinner">
+<Section Size="HeadingSize.H2" Name="Loading spinner" PageUrl="@pageUrl" HashTagName="loading-spinner">
     <div>Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.</div>
     <Demo Type="typeof(Button_Demo_08_Loading_Spinner)" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Show/Hide loading spinner" PageUrl="@pageUrl" HashTagName="show-hide-loading-spinner">
+<Section Size="HeadingSize.H2" Name="Show/Hide loading spinner" PageUrl="@pageUrl" HashTagName="show-hide-loading-spinner">
     <Demo Type="typeof(Button_Demo_08_Show_Hide_Loading_Spinner)" Tabs="true" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Show Tooltip" PageUrl="@pageUrl" HashTagName="show-tooltip">
+<Section Size="HeadingSize.H2" Name="Show Tooltip" PageUrl="@pageUrl" HashTagName="show-tooltip">
     <div class="mb-3">
         Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
     </div>
     <Demo Type="typeof(Button_Demo_09_A_Show_Tooltip)" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Dynamically update the tooltip text" PageUrl="@pageUrl" HashTagName="dynamically-update-the-tooltip-text">
+<Section Size="HeadingSize.H2" Name="Dynamically update the tooltip text" PageUrl="@pageUrl" HashTagName="dynamically-update-the-tooltip-text">
     <Demo Type="typeof(Button_Demo_09_B_Dynamically_update_the_tooltip_text)" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Custom tooltips" PageUrl="@pageUrl" HashTagName="custom-tooltips">
+<Section Size="HeadingSize.H2" Name="Custom tooltips" PageUrl="@pageUrl" HashTagName="custom-tooltips">
     <div class="mb-3">
         Blazor Bootstrap includes several predefined tooltip styles, each serving its own semantic purpose.
         The <b>TooltipColor</b> parameter can be used to customize the color of the tooltip.
@@ -94,7 +94,7 @@
     </Callout>
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Click events" PageUrl="@pageUrl" HashTagName="click-events">
+<Section Size="HeadingSize.H2" Name="Click events" PageUrl="@pageUrl" HashTagName="click-events">
     <Demo Type="typeof(Button_Demo_10_Click_Event)" />
     <Demo Type="typeof(Button_Demo_11_Double_Click_Event)" />
     <Demo Type="typeof(Button_Demo_12_Click_Event_With_Args)" />

BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor

@@ -11,19 +11,19 @@
 
 <CarbonAds />
 
-<Section Size="HeadingSize.H4" Text="Examples" PageUrl="@pageUrl" HashTagName="examples">
+<Section Size="HeadingSize.H4" Name="Examples" PageUrl="@pageUrl" HashTagName="examples">
     <Demo Type="typeof(Callout_Demo_01_Examples)" />
 </Section>
 
-<Section Size="HeadingSize.H4" Text="Custom heading" PageUrl="@pageUrl" HashTagName="custom-heading">
+<Section Size="HeadingSize.H4" Name="Custom heading" PageUrl="@pageUrl" HashTagName="custom-heading">
     <Demo Type="typeof(Callout_Demo_02_Change_Heading)" />
 </Section>
 
-<Section Size="HeadingSize.H4" Text="Large text" PageUrl="@pageUrl" HashTagName="large-text">
+<Section Size="HeadingSize.H4" Name="Large text" PageUrl="@pageUrl" HashTagName="large-text">
     <Demo Type="typeof(Callout_Demo_03_Large_Text)" />
 </Section>
 
-<Section Size="HeadingSize.H4" Text="Hide heading" PageUrl="@pageUrl" HashTagName="hide-heading">
+<Section Size="HeadingSize.H4" Name="Hide heading" PageUrl="@pageUrl" HashTagName="hide-heading">
     <Demo Type="typeof(Callout_Demo_04_Hide_Heading)" />
 </Section>
 

BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor

@@ -11,92 +11,92 @@
 
 <CarbonAds />
 
-<Section Size="HeadingSize.H2" Text="About" PageUrl="@pageUrl" HashTagName="about">
+<Section Size="HeadingSize.H2" Name="About" PageUrl="@pageUrl" HashTagName="about">
     <div class="mb-3">
         A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
     </div>
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples">
+<Section Size="HeadingSize.H2" Name="Examples" PageUrl="@pageUrl" HashTagName="examples">
     <div class="mb-3">
         Below is an example of a basic card with mixed content and a fixed width.
         Cards have no fixed width to start, so they'll naturally fill the full width of its parent element.
     </div>
     <Demo Type="typeof(Card_Demo_01_Examples)" Tabs="false" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Content types" PageUrl="@pageUrl" HashTagName="content-types">
+<Section Size="HeadingSize.H2" Name="Content types" PageUrl="@pageUrl" HashTagName="content-types">
     <div class="mb-3">
         Cards support a wide variety of content, including images, text, list groups, links, and more.
         Below are examples of what’s supported.
     </div>
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Body" PageUrl="@pageUrl" HashTagName="body">
+<Section Size="HeadingSize.H2" Name="Body" PageUrl="@pageUrl" HashTagName="body">
     <div class="mb-3">
         The building block of a card is the <b>CardBody</b>. Use it whenever you need a padded section within a card.
     </div>
     <Demo Type="typeof(Card_Demo_02_Content_Types_Body)" Tabs="false" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Titles, text, and links" PageUrl="@pageUrl" HashTagName="titles-text-and-links">
+<Section Size="HeadingSize.H2" Name="Titles, text, and links" PageUrl="@pageUrl" HashTagName="titles-text-and-links">
     <Demo Type="typeof(Card_Demo_03_Content_Types_Titles_Text_And_Links)" Tabs="false" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Images" PageUrl="@pageUrl" HashTagName="images">
+<Section Size="HeadingSize.H2" Name="Images" PageUrl="@pageUrl" HashTagName="images">
     <Demo Type="typeof(Card_Demo_04_Content_Types_Images)" Tabs="true" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="List groups" PageUrl="@pageUrl" HashTagName="list-groups">
+<Section Size="HeadingSize.H2" Name="List groups" PageUrl="@pageUrl" HashTagName="list-groups">
     <div class="mb-3">
         Create lists of content in a card with a flush list group.
     </div>
     <Demo Type="typeof(Card_Demo_05_Content_Types_List_Groups)" Tabs="false" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Kitchen sink" PageUrl="@pageUrl" HashTagName="kitchen-sink">
+<Section Size="HeadingSize.H2" Name="Kitchen sink" PageUrl="@pageUrl" HashTagName="kitchen-sink">
     <div class="mb-3">
         Mix and match multiple content types to create the card you need, or throw everything in there.
         Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
     </div>
     <Demo Type="typeof(Card_Demo_06_Content_Types_Kitchen_Sink)" Tabs="false" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Header and footer" PageUrl="@pageUrl" HashTagName="header-and-footer">
+<Section Size="HeadingSize.H2" Name="Header and footer" PageUrl="@pageUrl" HashTagName="header-and-footer">
     <div class="mb-3">
         Add an optional header and/or footer within a card.
     </div>
     <Demo Type="typeof(Card_Demo_07_Header_And_Footer)" Tabs="false" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Sizing" PageUrl="@pageUrl" HashTagName="sizing">
+<Section Size="HeadingSize.H2" Name="Sizing" PageUrl="@pageUrl" HashTagName="sizing">
     <div class="mb-3">
         Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated.
         You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.
     </div>
     <Demo Type="typeof(Card_Demo_08_Sizing)" Tabs="false" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Text alignment" PageUrl="@pageUrl" HashTagName="text-alignment">
+<Section Size="HeadingSize.H2" Name="Text alignment" PageUrl="@pageUrl" HashTagName="text-alignment">
     <div class="mb-3">
         You can quickly change the text alignment of any card—in its entirety or specific parts—with our <b>TextAlignment</b> parameter.
     </div>
     <Demo Type="typeof(Card_Demo_09_Text_Alignment)" Tabs="true" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Background and color" PageUrl="@pageUrl" HashTagName="background-and-color">
+<Section Size="HeadingSize.H2" Name="Background and color" PageUrl="@pageUrl" HashTagName="background-and-color">
     <Demo Type="typeof(Card_Demo_10_Background_And_Color)" Tabs="true" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Card groups" PageUrl="@pageUrl" HashTagName="card-groups">
+<Section Size="HeadingSize.H2" Name="Card groups" PageUrl="@pageUrl" HashTagName="card-groups">
     <div class="mb-3">
         Use card groups to render cards as a single, attached element with equal width and height columns. 
         Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.
     </div>
     <Demo Type="typeof(Card_Demo_11_Card_Groups)" Tabs="true" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Card groups with footer" PageUrl="@pageUrl" HashTagName="card-groups-with-footer">
+<Section Size="HeadingSize.H2" Name="Card groups with footer" PageUrl="@pageUrl" HashTagName="card-groups-with-footer">
     <div class="mb-3">
         When using card groups with footers, their content will automatically line up.
     </div>

BlazorBootstrap.Demo.RCL/Components/Pages/Carousel/CarouselDocumentation.razor

@@ -11,12 +11,12 @@
 
 <CarbonAds />
 
-<Section Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples">
+<Section Size="HeadingSize.H2" Name="Examples" PageUrl="@pageUrl" HashTagName="examples">
     <div class="mb-3">Here is a basic example of a carousel with three slides.</div>
     <Demo Type="typeof(Carousel_Demo_01_Examples)" Tabs="true" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Indicators" PageUrl="@pageUrl" HashTagName="indicators">
+<Section Size="HeadingSize.H2" Name="Indicators" PageUrl="@pageUrl" HashTagName="indicators">
     <div class="mb-3">
         You can add indicators to the carousel, alongside the previous/next controls.
         The indicators allow users to jump directly to a particular slide.
@@ -25,22 +25,22 @@
     <Demo Type="typeof(Carousel_Demo_02_Indicators)" Tabs="true" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Captions" PageUrl="@pageUrl" HashTagName="captions">
+<Section Size="HeadingSize.H2" Name="Captions" PageUrl="@pageUrl" HashTagName="captions">
     <div class="mb-3">
         You can add captions to your slides with the <code>CarouselCaption</code> component within any <code>CarouselItem</code>.
         They can be easily hidden on smaller viewports.
     </div>
     <Demo Type="typeof(Carousel_Demo_03_Captions)" Tabs="true" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Crossfade" PageUrl="@pageUrl" HashTagName="Crossfade">
+<Section Size="HeadingSize.H2" Name="Crossfade" PageUrl="@pageUrl" HashTagName="Crossfade">
     <div class="mb-3">
         To animate slides with a fading transition instead of sliding, set <code>Crossfade</code> to <code>true</code>.
     </div>
     <Demo Type="typeof(Carousel_Demo_04_Crossfade)" Tabs="true" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Autoplaying carousels" PageUrl="@pageUrl" HashTagName="autoplaying-carousels">
+<Section Size="HeadingSize.H2" Name="Autoplaying carousels" PageUrl="@pageUrl" HashTagName="autoplaying-carousels">
     <div class="mb-3">
         You can make your carousels autoplay on page load by setting the <code>Autoplay</code> parameter to <code>CarouselAutoPlay.StartOnPageLoad</code>.
         Autoplaying carousels automatically pause while hovered with the mouse.
@@ -53,29 +53,29 @@
     <Demo Type="typeof(Carousel_Demo_05_Autoplay_B_StartAfterUserInteraction)" Tabs="true" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Individual carousel item interval" PageUrl="@pageUrl" HashTagName="individual-carousel-item-interval">
+<Section Size="HeadingSize.H2" Name="Individual carousel item interval" PageUrl="@pageUrl" HashTagName="individual-carousel-item-interval">
     <div class="mb-3">
         Add <code>Interval</code> parameter to a <code>CarouselItem</code> component to change the amount of time to delay between automatically cycling to the next item.
     </div>
     <Demo Type="typeof(Carousel_Demo_06_Individual_Carouselitem_Interval)" Tabs="true" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Autoplaying carousels without controls" PageUrl="@pageUrl" HashTagName="autoplaying-carousels-without-controls">
+<Section Size="HeadingSize.H2" Name="Autoplaying carousels without controls" PageUrl="@pageUrl" HashTagName="autoplaying-carousels-without-controls">
     <div class="mb-3">
         Hide the controls by setting <code>ShowPreviousNextControls</code> parameter to <code>false</code>.
     </div>
     <Demo Type="typeof(Carousel_Demo_07_Autoplaying_Carousels_without_Controls)" Tabs="true" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Disable touch swiping" PageUrl="@pageUrl" HashTagName="disable-touch-swiping">
+<Section Size="HeadingSize.H2" Name="Disable touch swiping" PageUrl="@pageUrl" HashTagName="disable-touch-swiping">
     <div class="mb-3">
         Carousels support swiping left/right on touchscreen devices to move between slides.
         This can be disabled by setting the <code>Touch</code> option to <code>false</code>.
     </div>
     <Demo Type="typeof(Carousel_Demo_08_Touch)" Tabs="true" />
 </Section>
 
-<Section Size="HeadingSize.H2" Text="Events" PageUrl="@pageUrl" HashTagName="events">
+<Section Size="HeadingSize.H2" Name="Events" PageUrl="@pageUrl" HashTagName="events">
     <div class="mb-3">
         Blazor Bootstrap Carousel component exposes a two events for hooking into Carousel functionality.
         <table class="table">

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor

@@ -11,12 +11,12 @@
 
 <CarbonAds />
 
-<Section Size="HeadingSize.H4" Text="Prerequisites" PageUrl="@pageUrl" HashTagName="prerequisites" />
+<Section Size="HeadingSize.H4" Name="Prerequisites" PageUrl="@pageUrl" HashTagName="prerequisites" />
 <div class="mb-3">
     Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
 </div>
 
-<Section Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
+<Section Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
 <div class="mb-3">
     In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
 </div>
@@ -26,20 +26,20 @@
 </Callout>
 <Demo Type="typeof(BarChart_Demo_01_Examples)" Tabs="true" />
 
-<Section Size="HeadingSize.H4" Text="Horizontal bar chart" PageUrl="@pageUrl" HashTagName="horizontal-bar-chart" />
+<Section Size="HeadingSize.H4" Name="Horizontal bar chart" PageUrl="@pageUrl" HashTagName="horizontal-bar-chart" />
 <Demo Type="typeof(BarChart_Demo_02_Horizontal_BarChart)" Tabs="true" />
 
-<Section Size="HeadingSize.H4" Text="Stacked bar chart" PageUrl="@pageUrl" HashTagName="stacked-bar-chart" />
+<Section Size="HeadingSize.H4" Name="Stacked bar chart" PageUrl="@pageUrl" HashTagName="stacked-bar-chart" />
 <Demo Type="typeof(BarChart_Demo_03_Stacked_BarChart)" Tabs="true" />
 
-<Section Size="HeadingSize.H4" Text="Locale" PageUrl="@pageUrl" HashTagName="locale" />
+<Section Size="HeadingSize.H4" Name="Locale" PageUrl="@pageUrl" HashTagName="locale" />
 <div class="my-3">
     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 <b>German</b> locale (<b>de_DE</b>).
 </div>
 <Demo Type="typeof(BarChart_Demo_04_Locale)" Tabs="true" />
 
-<Section Size="HeadingSize.H4" Text="Data labels" PageUrl="@pageUrl" HashTagName="data-labels" />
+<Section Size="HeadingSize.H4" Name="Data labels" PageUrl="@pageUrl" HashTagName="data-labels" />
 <Demo Type="typeof(BarChart_Demo_05_Stacked_BarChart_with_Datalabels)" Tabs="true" />
 
 @code {