Skip to content

Commit 2972113

Browse files
gvreddy04gvreddy04
authored
3.2.0 release docs (#949)
* ThemeSwitcher docs and other docs updated + 3.2.0 version updates
1 parent 15bee38 commit 2972113

File tree

44 files changed

+356
-182
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+356
-182
lines changed

‎BlazorBootstrap.Demo.Hosted/Client/wwwroot/appsettings.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"version": "3.1.1",
2+
"version": "3.2.0",
33
"release": {
4-
"short_description": "New Markdown component and other enhancements!!!"
4+
"short_description": "New MainLayout and Theme Switcher components, along with other enhancements!!!"
55
},
66
"urls": {
77
"docs": "//docs.blazorbootstrap.com/docs/getting-started/blazor-webassembly",

‎BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
<hr class="d-lg-none my-2 text-white-50">
6969
</li>
7070
<li class="nav-item">
71-
<ThemeSwitcher />
71+
<ThemeSwitcher Position="DropdownMenuPosition.End" />
7272
</li>
7373
</ul>
7474
</div>

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,11 @@
2626
<div>
2727
<div class="vr mt-2"></div>
2828
</div>
29-
<ThemeSwitcher Class="ps-3 ps-lg-2" OnThemeChanged="OnThemeChanged" />
29+
30+
<ThemeSwitcher Class="ps-3 ps-lg-2"
31+
Position="DropdownMenuPosition.End"
32+
OnThemeChanged="@(async(string themeName) => await OnThemeChanged(themeName))" />
33+
3034
</HeaderSection>
3135
<SidebarSection>
3236
<Sidebar2 Href="/"

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,9 @@ internal override IEnumerable<NavItem> GetNavItems()
7777
new (){ Id = "525", Text = "Sortable List", Href = "/sortable-list", IconName = IconName.ArrowsMove, ParentId = "5" },
7878
new (){ Id = "526", Text = "Spinner", Href = "/spinners", IconName = IconName.ArrowRepeat, ParentId = "5" },
7979
new (){ Id = "527", Text = "Tabs", Href = "/tabs", IconName = IconName.WindowPlus, ParentId = "5" },
80-
new (){ Id = "528", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" },
81-
new (){ Id = "529", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" },
80+
new (){ Id = "528", Text = "Theme Switcher", Href = "/theme-switcher", IconName = IconName.NintendoSwitch, ParentId = "5" },
81+
new (){ Id = "529", Text = "Toasts", Href = "/toasts", IconName = IconName.ExclamationTriangleFill, ParentId = "5" },
82+
new (){ Id = "530", Text = "Tooltips", Href = "/tooltips", IconName = IconName.ChatSquareDotsFill, ParentId = "5" },
8283

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

102-
private void OnThemeChanged(string themeName)
103-
{
104-
JS.InvokeVoidAsync("updateDemoCodeThemeCss", themeName);
105-
}
103+
private async ValueTask OnThemeChanged(string themeName)
104+
=> await JS.InvokeVoidAsync("updateDemoCodeThemeCss", themeName);
106105
}

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111

1212
<CarbonAds />
1313

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

20-
<Section Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" Link="how-it-works">
20+
<Section Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
2121
<div class="mb-3">
2222
In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
2323
</div>

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111

1212
<CarbonAds />
1313

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

20-
<Section Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" Link="how-it-works">
20+
<Section Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
2121
<div class="mb-3">
2222
In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
2323
</div>

‎BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@
1111

1212
<CarbonAds />
1313

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

20-
<Section Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" Link="how-it-works">
20+
<Section Size="HeadingSize.H4" Name="How it works" PageUrl="@pageUrl" Link="how-it-works">
2121
<div class="mb-3">
2222
In the following example, a <a href="/utils/color-utility#categorical-12-color">categorical 12-color</a> palette is used.
2323
</div>
@@ -28,7 +28,7 @@
2828
<Demo Type="typeof(ScatterChart_Demo_01_Basic_Example)" Tabs="true"/>
2929
</Section>
3030

31-
<Section Size="HeadingSize.H4" Text="Dynamic data" PageUrl="@pageUrl" Link="dynamic-data">
31+
<Section Size="HeadingSize.H4" Name="Dynamic data" PageUrl="@pageUrl" Link="dynamic-data">
3232
<div class="mb-3">
3333
In the following example, you can randomize the data and datasets dynamically.
3434
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.

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@
1313

1414
<CarbonAds />
1515

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

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

32-
<Section Size="HeadingSize.H2" Text="Min and max" PageUrl="@pageUrl" Link="min-and-max">
32+
<Section Size="HeadingSize.H2" Name="Min and max" PageUrl="@pageUrl" Link="min-and-max">
3333
<div class="mb-3">
3434
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.
3535
By default, the minimum is 0.
@@ -46,17 +46,17 @@
4646
<Demo Type="typeof(RangeInput_Demo_03_Min_Max)" Tabs="true" />
4747
</Section>
4848

49-
<Section Size="HeadingSize.H2" Text="Step" PageUrl="@pageUrl" Link="step">
49+
<Section Size="HeadingSize.H2" Name="Step" PageUrl="@pageUrl" Link="step">
5050
<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>
5151
<Demo Type="typeof(RangeInput_Demo_04_Step)" Tabs="true" />
5252
</Section>
5353

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

59-
<Section Size="HeadingSize.H2" Text="Tick marks" PageUrl="@pageUrl" Link="tick-marks">
59+
<Section Size="HeadingSize.H2" Name="Tick marks" PageUrl="@pageUrl" Link="tick-marks">
6060
<div class="mb-3">
6161
To add tick marks to a <code>RangeInput</code>, set the <code>TickMarks</code> parameter.
6262
</div>

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@
1313

1414
<CarbonAds />
1515

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

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

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

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

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

‎BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
<CarbonAds />
1515

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

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

35-
<Section Size="HeadingSize.H2" Text="Enable max min" PageUrl="@pageUrl" Link="enable-max-min">
35+
<Section Size="HeadingSize.H2" Name="Enable max min" PageUrl="@pageUrl" Link="enable-max-min">
3636
<div class="mb-3">
3737
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.
3838
</div>
@@ -43,7 +43,7 @@
4343
<Demo Type="typeof(TimeInput_Demo_03_Max_Min)" Tabs="true" />
4444
</Section>
4545

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

56-
<Section Size="HeadingSize.H2" Text="Validations" PageUrl="@pageUrl" Link="validations">
56+
<Section Size="HeadingSize.H2" Name="Validations" PageUrl="@pageUrl" Link="validations">
5757
<div class="mb-3">
5858
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.
5959
</div>
6060
<Demo Type="typeof(TimeInput_Demo_05_Validations)" Tabs="true" />
6161
</Section>
6262

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

70-
<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">
70+
<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">
7171
<div class="mb-3">
7272
One common scenario is that the time fields are restricted based on the entry in another time field.
7373
In the example below, we restrict the arrival time based on the selection of departure.

0 commit comments

Comments
 (0)