Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

3.2.0 release docs #949

Merged
merged 5 commits into from
Nov 20, 2024
Merged

3.2.0 release docs #949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d838654
ThemeSwitcher docs and other docs updated
gvreddy04 Nov 20, 2024
21b8108
Theme switcher updates
gvreddy04 Nov 20, 2024
30487c6
Theme switcher updates
gvreddy04 Nov 20, 2024
baed6e2
3.2.0 version updates
gvreddy04 Nov 20, 2024
71020e1
version 3.2.0 updates
gvreddy04 Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions BlazorBootstrap.Demo.Hosted/Client/wwwroot/appsettings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"version": "3.1.1",
"version": "3.2.0",
"release": {
"short_description": "New Markdown component and other enhancements!!!"
"short_description": "New MainLayout and Theme Switcher components, along with other enhancements!!!"
},
"urls": {
"docs": "//docs.blazorbootstrap.com/docs/getting-started/blazor-webassembly",
Expand Down
2 changes: 1 addition & 1 deletion BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
<hr class="d-lg-none my-2 text-white-50">
</li>
<li class="nav-item">
<ThemeSwitcher />
<ThemeSwitcher Position="DropdownMenuPosition.End" />
</li>
</ul>
</div>
Expand Down
6 changes: 5 additions & 1 deletion BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,11 @@
<div>
<div class="vr mt-2"></div>
</div>
<ThemeSwitcher Class="ps-3 ps-lg-2" OnThemeChanged="OnThemeChanged" />

<ThemeSwitcher Class="ps-3 ps-lg-2"
Position="DropdownMenuPosition.End"
OnThemeChanged="@(async(string themeName) => await OnThemeChanged(themeName))" />

</HeaderSection>
<SidebarSection>
<Sidebar2 Href="/"
Expand Down
11 changes: 5 additions & 6 deletions BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,9 @@ internal override IEnumerable<NavItem> GetNavItems()
new (){ Id = "525", Text = "Sortable List", Href = "/sortable-list", IconName = IconName.ArrowsMove, ParentId = "5" },
new (){ Id = "526", Text = "Spinner", Href = "/spinners", IconName = IconName.ArrowRepeat, ParentId = "5" },
new (){ Id = "527", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" },
new (){ Id = "528", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" },
new (){ Id = "529", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" },
new (){ Id = "528", Text = "Theme Switcher", Href = "/theme-switcher", IconName = IconName.NintendoSwitch, ParentId = "5" },
new (){ Id = "529", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" },
new (){ Id = "530", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" },

new (){ Id = "6", Text = "Data Visualization", IconName = IconName.BarChartFill, IconColor = IconColor.Warning },
new (){ Id = "600", Text = "Bar Chart", Href = "/charts/bar-chart", IconName = IconName.BarChartFill, ParentId = "6", Match = NavLinkMatch.All },
Expand All @@ -99,8 +100,6 @@ internal override IEnumerable<NavItem> GetNavItems()
return navItems;
}

private void OnThemeChanged(string themeName)
{
JS.InvokeVoidAsync("updateDemoCodeThemeCss", themeName);
}
private async ValueTask OnThemeChanged(string themeName)
=> await JS.InvokeVoidAsync("updateDemoCodeThemeCss", themeName);
}
4 changes: 2 additions & 2 deletions ...tstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@

<CarbonAds />

<Section Size="HeadingSize.H4" Text="Prerequisites" PageUrl="@pageUrl" Link="prerequisites">
<Section Size="HeadingSize.H4" Name="Prerequisites" PageUrl="@pageUrl" Link="prerequisites">
<div class="mb-3">
Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
</div>
</Section>

<Section Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" Link="how-it-works">
<Section Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="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>
Expand Down
4 changes: 2 additions & 2 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@

<CarbonAds />

<Section Size="HeadingSize.H4" Text="Prerequisites" PageUrl="@pageUrl" Link="prerequisites">
<Section Size="HeadingSize.H4" Name="Prerequisites" PageUrl="@pageUrl" Link="prerequisites">
<div class="mb-3">
Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
</div>
</Section>

<Section Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" Link="how-it-works">
<Section Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="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>
Expand Down
6 changes: 3 additions & 3 deletions ...rBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,13 @@

<CarbonAds />

<Section Size="HeadingSize.H4" Text="Prerequisites" PageUrl="@pageUrl" Link="prerequisites">
<Section Size="HeadingSize.H4" Name="Prerequisites" PageUrl="@pageUrl" Link="prerequisites">
<div class="mb-3">
Refer to the <a href="/getting-started/blazor-webassembly">getting started guide</a> for setting up charts.
</div>
</Section>

<Section Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" Link="how-it-works">
<Section Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="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>
Expand All @@ -28,7 +28,7 @@
<Demo Type="typeof(ScatterChart_Demo_01_Basic_Example)" Tabs="true"/>
</Section>

<Section Size="HeadingSize.H4" Text="Dynamic data" PageUrl="@pageUrl" Link="dynamic-data">
<Section Size="HeadingSize.H4" Name="Dynamic data" PageUrl="@pageUrl" Link="dynamic-data">
<div class="mb-3">
In the following example, you can randomize the data and datasets dynamically.
Along with this, the <b>ScatterChartOptions</b> are updated. With these changes, the scatter chart is responsive, and when hovered over, the points' radius increases for better visibility to the end-user.
Expand Down
12 changes: 6 additions & 6 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@

<CarbonAds />

<Section Size="HeadingSize.H2" Text="Basic usage" PageUrl="@pageUrl" Link="basic-usage">
<Section Size="HeadingSize.H2" Name="Basic usage" PageUrl="@pageUrl" Link="basic-usage">
<div class="mb-3"></div>
<Demo Type="typeof(RangeInput_Demo_01_Basic_Usage_A)" Tabs="false" />
<Demo Type="typeof(RangeInput_Demo_01_Basic_Usage_B)" Tabs="false" />
</Section>

<Section Size="HeadingSize.H2" Text="Disabled" PageUrl="@pageUrl" Link="disabled">
<Section Size="HeadingSize.H2" Name="Disabled" PageUrl="@pageUrl" Link="disabled">
<div class="mb-3">Use the <code>Disabled</code> parameter to disable the <code>RangeInput</code>.</div>
<Demo Type="typeof(RangeInput_Demo_02_Disabled_A)" Tabs="true" />
<div class="my-3">Also, use <code>Enable()</code> and <code>Disable()</code> methods to enable and disable the <code>RangeInput</code>.</div>
Expand All @@ -29,7 +29,7 @@
<Demo Type="typeof(RangeInput_Demo_02_Disabled_B)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Text="Min and max" PageUrl="@pageUrl" Link="min-and-max">
<Section Size="HeadingSize.H2" Name="Min and max" PageUrl="@pageUrl" Link="min-and-max">
<div class="mb-3">
Set the <code>Min</code> and <code>Max</code> parameters to restrict the user input between the <code>Min</code> and <code>Max</code> range.
By default, the minimum is 0.
Expand All @@ -46,17 +46,17 @@
<Demo Type="typeof(RangeInput_Demo_03_Min_Max)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Text="Step" PageUrl="@pageUrl" Link="step">
<Section Size="HeadingSize.H2" Name="Step" PageUrl="@pageUrl" Link="step">
<div class="mb-3">The <code>Step</code> parameter is a number that specifies the granularity that the value must adhere to. Only values that match the specified stepping interval are valid.</div>
<Demo Type="typeof(RangeInput_Demo_04_Step)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Text="Decimal values" PageUrl="@pageUrl" Link="decimal-values">
<Section Size="HeadingSize.H2" Name="Decimal values" PageUrl="@pageUrl" Link="decimal-values">
<div class="mb-3"></div>
<Demo Type="typeof(RangeInput_Demo_05_Decimals)" Tabs="false" />
</Section>

<Section Size="HeadingSize.H2" Text="Tick marks" PageUrl="@pageUrl" Link="tick-marks">
<Section Size="HeadingSize.H2" Name="Tick marks" PageUrl="@pageUrl" Link="tick-marks">
<div class="mb-3">
To add tick marks to a <code>RangeInput</code>, set the <code>TickMarks</code> parameter.
</div>
Expand Down
10 changes: 5 additions & 5 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@

<CarbonAds />

<Section Size="HeadingSize.H2" Text="Basic usage" PageUrl="@pageUrl" Link="basic-usage">
<Section Size="HeadingSize.H2" Name="Basic usage" PageUrl="@pageUrl" Link="basic-usage">
<Demo Type="typeof(Switch_Demo_01_Basic_Usage)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Text="Disable" PageUrl="@pageUrl" Link="disable">
<Section Size="HeadingSize.H2" Name="Disable" PageUrl="@pageUrl" Link="disable">
<div class="mb-3">Use the <code>Disabled</code> parameter to disable the <code>Switch</code>.</div>
<Demo Type="typeof(Switch_Demo_02_A_Disable)" Tabs="false" />
<div class="my-3">Also, use <b>Enable()</b> and <b>Disable()</b> methods to enable and disable the <code>Switch</code>.</div>
Expand All @@ -27,21 +27,21 @@
<Demo Type="typeof(Switch_Demo_02_B_Disable)" Tabs="false" />
</Section>

<Section Size="HeadingSize.H2" Text="Reverse" PageUrl="@pageUrl" Link="reverse">
<Section Size="HeadingSize.H2" Name="Reverse" PageUrl="@pageUrl" Link="reverse">
<div class="mb-3">
Put your switches on the opposite side by using the <code>Reverse</code> parameter.
</div>
<Demo Type="typeof(Switch_Demo_03_Reverse)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Text="Events: ValueChanged" PageUrl="@pageUrl" Link="events-value-changed">
<Section Size="HeadingSize.H2" Name="Events: ValueChanged" PageUrl="@pageUrl" Link="events-value-changed">
<div class="mb-3">
This event fired when the <code>Switch</code> selection changed.
</div>
<Demo Type="typeof(Switch_Demo_04_Events_Value_Changed)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Text="Form" PageUrl="@pageUrl" Link="form">
<Section Size="HeadingSize.H2" Name="Form" PageUrl="@pageUrl" Link="form">
<Demo Type="typeof(Switch_Demo_05_Form)" Tabs="true" />
</Section>

Expand Down
14 changes: 7 additions & 7 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

<CarbonAds />

<Section Size="HeadingSize.H2" Text="Basic usage" PageUrl="@pageUrl" Link="basic-usage">
<Section Size="HeadingSize.H2" Name="Basic usage" PageUrl="@pageUrl" Link="basic-usage">
<Callout Color="CalloutColor.Warning" Heading="NOTE">
The input UI generally varies from browser to browser.
In unsupported browsers, the control degrades gracefully to <code>type="text"</code>.
Expand All @@ -22,7 +22,7 @@
<Demo Type="typeof(TimeInput_Demo_01_Basic_Usage)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Text="Generic type" PageUrl="@pageUrl" Link="generic-type">
<Section Size="HeadingSize.H2" Name="Generic type" PageUrl="@pageUrl" Link="generic-type">
<div class="mb-3">
<p>
The Blazor Bootstrap TimeInput component supports <code>TimeOnly</code> and <code>TimeOnly?</code>.
Expand All @@ -32,7 +32,7 @@
<Demo Type="typeof(TimeInput_Demo_02_Generic_Type)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Text="Enable max min" PageUrl="@pageUrl" Link="enable-max-min">
<Section Size="HeadingSize.H2" Name="Enable max min" PageUrl="@pageUrl" Link="enable-max-min">
<div class="mb-3">
Set <code>EnableMinMax="true"</code> and set the <code>Max</code> and <code>Min</code> parameters to restrict the user input between the Min and Max range.
</div>
Expand All @@ -43,7 +43,7 @@
<Demo Type="typeof(TimeInput_Demo_03_Max_Min)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Text="Disable" PageUrl="@pageUrl" Link="disable">
<Section Size="HeadingSize.H2" Name="Disable" PageUrl="@pageUrl" Link="disable">
<div class="mb-3">Use the <b>Disabled</b> parameter to disable the <code>TimeInput</code>.</div>
<Demo Type="typeof(TimeInput_Demo_04_A_Disable)" Tabs="false" />
<div class="my-3">Also, use <b>Enable()</b> and <b>Disable()</b> methods to enable and disable the <code>TimeInput</code>.</div>
Expand All @@ -53,21 +53,21 @@
<Demo Type="typeof(TimeInput_Demo_04_B_Disable)" Tabs="false" />
</Section>

<Section Size="HeadingSize.H2" Text="Validations" PageUrl="@pageUrl" Link="validations">
<Section Size="HeadingSize.H2" Name="Validations" PageUrl="@pageUrl" Link="validations">
<div class="mb-3">
Like any other blazor input component, <b>TimeInput</b> component supports validations. Use the <b>DataAnnotations</b> to validate the user input before submitting the form. In the below example, we used the <code>Required</code> attributes.
</div>
<Demo Type="typeof(TimeInput_Demo_05_Validations)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Text="Events: ValueChanged" PageUrl="@pageUrl" Link="event-value-changed">
<Section Size="HeadingSize.H2" Name="Events: ValueChanged" PageUrl="@pageUrl" Link="event-value-changed">
<div class="mb-3">
This event fires on every user keystroke/selection that changes the <b>TimeInput</b> value.
</div>
<Demo Type="typeof(TimeInput_Demo_06_Events_Value_Changed)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Text="Restrict the time field based on the entry in another time field" PageUrl="@pageUrl" Link="restrict-the-time-field-based-on-the-entry-in-another-time-field">
<Section Size="HeadingSize.H2" Name="Restrict the time field based on the entry in another time field" PageUrl="@pageUrl" Link="restrict-the-time-field-based-on-the-entry-in-another-time-field">
<div class="mb-3">
One common scenario is that the time fields are restricted based on the entry in another time field.
In the example below, we restrict the arrival time based on the selection of departure.
Expand Down
17 changes: 11 additions & 6 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.BarChartLineFill" class="me-2" /> Charts <Badge Color="BadgeColor.Success">Updated</Badge></h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.BarChartLineFill" class="me-2" /> Charts</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
Expand All @@ -107,12 +107,12 @@
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/dropdown">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.MenuButtonWideFill" class="me-2" /> Dropdown <Badge Color="BadgeColor.Success">Updated</Badge></h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.MenuButtonWideFill" class="me-2" /> Dropdown</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/google-map">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Map" class="me-2" /> Google Map <Badge Color="BadgeColor.Success">Updated</Badge></h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.Map" class="me-2" /> Google Map</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
Expand All @@ -132,7 +132,7 @@
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/markdown">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.MarkdownFill" class="me-2" /> Markdown <Badge Color="BadgeColor.Danger">New</Badge></h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.MarkdownFill" class="me-2" /> Markdown</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
Expand All @@ -157,7 +157,7 @@
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/pdf-viewer">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.FilePdfFill" class="me-2" /> PDF Viewer</h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.FilePdfFill" class="me-2" /> PDF Viewer <Badge Color="BadgeColor.Success">Updated</Badge></h4>
</a>
</div>
<div class="col-sm-4 mb-2">
Expand Down Expand Up @@ -225,6 +225,11 @@
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ClockFill" class="me-2" /> Time Input</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/theme-switcher">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.NintendoSwitch" class="me-2" /> Theme Switcher <Badge Color="BadgeColor.Danger">New</Badge></h4>
</a>
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/toasts">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.ExclamationTriangleFill" class="me-2" /> Toasts</h4>
Expand Down Expand Up @@ -314,7 +319,7 @@
</div>
<div class="col-sm-4 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/charts/line-chart">
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.GraphUp" class="me-2" /> Line Chart <Badge Color="BadgeColor.Success">Updated</Badge></h4>
<h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.GraphUp" class="me-2" /> Line Chart</h4>
</a>
</div>
<div class="col-sm-4 mb-2">
Expand Down
8 changes: 4 additions & 4 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Preload/PreloadDocumentation.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

<CarbonAds />

<Section Size="HeadingSize.H2" Text="Things to know when using the blazor preload component" PageUrl="@pageUrl" Link="things-to-know-when-using-the-blazor-preload-component">
<Section Size="HeadingSize.H2" Name="Things to know when using the blazor preload component" PageUrl="@pageUrl" Link="things-to-know-when-using-the-blazor-preload-component">
<div class="mb-3">
<ul>
<li>Add the <b>Preload</b> component to your <b>current page</b> or your <b>layout page</b>.</li>
Expand All @@ -22,19 +22,19 @@
</div>
</Section>

<Section Size="HeadingSize.H2" Text="Global preload service for the application" PageUrl="@pageUrl" Link="global-preload-service-for-the-application">
<Section Size="HeadingSize.H2" Name="Global preload service for the application" PageUrl="@pageUrl" Link="global-preload-service-for-the-application">
<div class="mb-3">1. Add the <code>Preload</code> component in <code>MainLayout.razor</code> page as shown below.</div>
<Demo Type="typeof(Preload_Demo_01_Global_Preload_For_Application_A)" ShowCodeOnly="true" />
<div class="mb-3">2. Inject <code>PreloadService</code>, then call the <code>Show()</code> and <code>Hide()</code> methods before and after the Service/API, respectively, as shown below.</div>
<Demo Type="typeof(Preload_Demo_01_Global_Preload_For_Application_B)" ShowCodeOnly="true" />
</Section>

<Section Size="HeadingSize.H2" Text="Change loading text" PageUrl="@pageUrl" Link="change-loading-text">
<Section Size="HeadingSize.H2" Name="Change loading text" PageUrl="@pageUrl" Link="change-loading-text">
<div class="mb-3"></div>
<Demo Type="typeof(Preload_Demo_02_Loading_Text)" />
</Section>

<Section Size="HeadingSize.H2" Text="Change spinner color" PageUrl="@pageUrl" Link="change-spinner-color">
<Section Size="HeadingSize.H2" Name="Change spinner color" PageUrl="@pageUrl" Link="change-spinner-color">
<div class="mb-3">
Change the default spinner color by passing the <code>SpinnerColor</code> enum to the <code>Show(...)</code> method.
In the below example, we are using a <a href="/preload#global-preload-service-for-the-application">global preload service</a>, as shown in the above section.
Expand Down
Loading
Loading