diff --git a/BlazorBootstrap.Demo.Hosted/Client/wwwroot/appsettings.json b/BlazorBootstrap.Demo.Hosted/Client/wwwroot/appsettings.json index 5ba5d432f..06039eb6d 100644 --- a/BlazorBootstrap.Demo.Hosted/Client/wwwroot/appsettings.json +++ b/BlazorBootstrap.Demo.Hosted/Client/wwwroot/appsettings.json @@ -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", diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor index fd5e67f14..3167f32d0 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/EmptyLayout.razor @@ -68,7 +68,7 @@
  • - +
    • diff --git a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor index 5bd16f73c..615481918 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor @@ -26,7 +26,11 @@
    - + + + 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 }, @@ -99,8 +100,6 @@ internal override IEnumerable GetNavItems() return navItems; } - private void OnThemeChanged(string themeName) - { - JS.InvokeVoidAsync("updateDemoCodeThemeCss", themeName); - } + private async ValueTask OnThemeChanged(string themeName) + => await JS.InvokeVoidAsync("updateDemoCodeThemeCss", themeName); } diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor index 99f094b0c..14917b9ef 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor @@ -11,13 +11,13 @@ -
    +
    Refer to the getting started guide for setting up charts.
    -
    +
    In the following example, a categorical 12-color palette is used.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor index fd7c9fc7f..c6e1abec6 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor @@ -11,13 +11,13 @@ -
    +
    Refer to the getting started guide for setting up charts.
    -
    +
    In the following example, a categorical 12-color palette is used.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor index 5dd3dbe73..737a05ce0 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor @@ -11,13 +11,13 @@ -
    +
    Refer to the getting started guide for setting up charts.
    -
    +
    In the following example, a categorical 12-color palette is used.
    @@ -28,7 +28,7 @@
    -
    +
    In the following example, you can randomize the data and datasets dynamically. Along with this, the ScatterChartOptions 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. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor index 2aea480b1..cee95d4de 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/RangeInput/RangeInputDocumentation.razor @@ -13,13 +13,13 @@ -
    +
    -
    +
    Use the Disabled parameter to disable the RangeInput.
    Also, use Enable() and Disable() methods to enable and disable the RangeInput.
    @@ -29,7 +29,7 @@
    -
    +
    Set the Min and Max parameters to restrict the user input between the Min and Max range. By default, the minimum is 0. @@ -46,17 +46,17 @@
    -
    +
    The Step parameter is a number that specifies the granularity that the value must adhere to. Only values that match the specified stepping interval are valid.
    -
    +
    -
    +
    To add tick marks to a RangeInput, set the TickMarks parameter.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor index 13b7966c8..5007a50b4 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/Switch/SwitchDocumentation.razor @@ -13,11 +13,11 @@ -
    +
    -
    +
    Use the Disabled parameter to disable the Switch.
    Also, use Enable() and Disable() methods to enable and disable the Switch.
    @@ -27,21 +27,21 @@
    -
    +
    Put your switches on the opposite side by using the Reverse parameter.
    -
    +
    This event fired when the Switch selection changed.
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor index c05d9da9d..ca30dd5e3 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Form/TimeInput/TimeInputDocumentation.razor @@ -13,7 +13,7 @@ -
    +
    The input UI generally varies from browser to browser. In unsupported browsers, the control degrades gracefully to type="text". @@ -22,7 +22,7 @@
    -
    +

    The Blazor Bootstrap TimeInput component supports TimeOnly and TimeOnly?. @@ -32,7 +32,7 @@

    -
    +
    Set EnableMinMax="true" and set the Max and Min parameters to restrict the user input between the Min and Max range.
    @@ -43,7 +43,7 @@
    -
    +
    Use the Disabled parameter to disable the TimeInput.
    Also, use Enable() and Disable() methods to enable and disable the TimeInput.
    @@ -53,21 +53,21 @@
    -
    +
    Like any other blazor input component, TimeInput component supports validations. Use the DataAnnotations to validate the user input before submitting the form. In the below example, we used the Required attributes.
    -
    +
    This event fires on every user keystroke/selection that changes the TimeInput value.
    -
    +
    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. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor index 172d701ea..7f65a9275 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor @@ -82,7 +82,7 @@
    -

    Charts Updated

    +

    Charts
    @@ -107,12 +107,12 @@
    -

    Dropdown Updated

    +

    Dropdown
    -

    Google Map Updated

    +

    Google Map
    @@ -132,7 +132,7 @@
    -

    Markdown New

    +

    Markdown
    @@ -157,7 +157,7 @@
    -

    PDF Viewer

    +

    PDF Viewer Updated
    @@ -225,6 +225,11 @@

    Time Input

    +
    + +

    Theme Switcher New

    +     +

    Toasts

    @@ -314,7 +319,7 @@
    -

    Line Chart Updated

    +

    Line Chart
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Preload/PreloadDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Preload/PreloadDocumentation.razor index db704309b..46cddc921 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Preload/PreloadDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Preload/PreloadDocumentation.razor @@ -11,7 +11,7 @@ -
    +
    • Add the Preload component to your current page or your layout page.
      • @@ -22,19 +22,19 @@
    -
    +
    1. Add the Preload component in MainLayout.razor page as shown below.
    2. Inject PreloadService, then call the Show() and Hide() methods before and after the Service/API, respectively, as shown below.
    -
    +
    -
    +
    Change the default spinner color by passing the SpinnerColor enum to the Show(...) method. In the below example, we are using a global preload service, as shown in the above section. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Progress/ProgressDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Progress/ProgressDocumentation.razor index cfdbb758c..255329d78 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Progress/ProgressDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Progress/ProgressDocumentation.razor @@ -11,51 +11,51 @@ -
    +
    -
    +
    Add labels to your Blazor ProgressBar component using the Label parameter or by calling the SetLabel(...) method.
    -
    +
    Use IncreaseWidth() or DecreaseWidth() methods to increase or decrease the Blazor ProgressBar width.
    -
    +
    Set the height of the Blazor Progress by using the Height parameter. Height is measured in pixels.
    -
    +
    Use the Color parameter or the SetColor(ProgressColor color) method to change the appearance of individual Blazor ProgressBar components.
    -
    +
    You can dynamically set the Blazor ProgressBar color by calling the SetColor() method.
    -
    +
    Include multiple Blazor ProgressBar components in a Blazor Progress component if needed.
    -
    +
    Add Type="ProgressType.Striped" to any Blazor ProgressBar component to apply a stripe.
    -
    +
    The stripes can also be animated. Add Type="ProgressType.StripedAndAnimated" to the Blazor ProgressBar component to animate the stripes right to the left.
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/RibbonDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/RibbonDocumentation.razor index daded6f5a..4f745b72b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/RibbonDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/RibbonDocumentation.razor @@ -11,12 +11,12 @@ -
    +
    In the following example, you will see a ribbon similar to the one found in Outlook.
    -
    +
    In the following example, instead of icons like Bootstrap, Font Awesome, etc., we used PNG icons.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/Ribbon_Demo_01_How_It_Works.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/Ribbon_Demo_01_How_It_Works.razor index 37f2af455..82c82f68c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/Ribbon_Demo_01_How_It_Works.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/Ribbon_Demo_01_How_It_Works.razor @@ -2,26 +2,26 @@ - + New
    Email     - +     - - - + + +     - + Send/Receive
    All Folders     Update
    Folder         - + Show
    Progress     Cancel
    All         @@ -30,12 +30,12 @@ - + New
    Folder     New
    Search Folder         - + Rename
    Folder     Copy
    Folder     Move
    Folder     diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/Ribbon_Demo_02_Images.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/Ribbon_Demo_02_Images.razor index b8310465b..f84ae2843 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/Ribbon_Demo_02_Images.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Ribbon/Ribbon_Demo_02_Images.razor @@ -2,26 +2,26 @@ - + New
    Email     - +     - - - + + +     - + Send/Receive
    All Folders     Update
    Folder         - + Show
    Progress     Cancel
    All         @@ -30,12 +30,12 @@ - + New
    Folder     New
    Search Folder         - + Rename
    Folder     Copy
    Folder     Move
    Folder     diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ScriptLoader/ScriptLoaderDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/ScriptLoader/ScriptLoaderDocumentation.razor index 68f5e2046..c45a6e280 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/ScriptLoader/ScriptLoaderDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/ScriptLoader/ScriptLoaderDocumentation.razor @@ -11,7 +11,7 @@ -
    +
    In the following example, the jQuery script is loaded using the Script Loader component.
    @@ -24,7 +24,7 @@ Blazor Script Loader - Test whether the jQuery script has been loaded successfully -
    +
    Blazor Bootstrap Script Loader component exposes two events. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor index 68766d8b1..285de70bf 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar/SidebarDocumentation.razor @@ -11,57 +11,57 @@ -
    +
    -
    +
    Use NavItem's Id and ParentId to set the parent-child relation.
    Currently, two levels of navigation are supported. For more than two levels, use the Sidebar2 component.
    -
    +
    Set IconColor property to change the color.
    -
    +
    Replace your MainLayout.razor page code with the below example to have a complete layout with a sidebar.
    -
    +
    Call ToggleSidebar() method to toggle the Sidebar to show the icons only.
    -
    +
    A badge is useful when displaying the application version, environment, or other information. Use the BadgeText parameter to show the badge.
    -
    +
    Use the CustomIconName parameter to set the custom logo icon using font awesome or other icons.
    -
    +
    Use the ImageSrc parameter to set the brand logo.
    -
    +
    Developers can customize the sidebar color by changing the CSS variables, as mentioned in the below example.
    -
    +
    Set the Class property of a NavItem to apply a custom CSS class.
    -
    +
    Set the Width parameter to change the sidebar width. Default value is 270px.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor index cd3c48aaa..5c9f2ec1b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Sidebar2/Sidebar2Documentation.razor @@ -11,37 +11,37 @@ -
    +
    -
    +
    -@*
    +@*
    Set IconColor property to change the color.
    *@ -
    +
    Replace your MainLayout.razor page code with the below example to have a complete layout with a sidebar.
    -
    +
    Use the CustomIconName parameter to set the custom logo icon using font awesome or other icons.
    -
    +
    Use the ImageSrc parameter to set the brand logo.
    -
    +
    Set the Width parameter to change the sidebar width. Default value is 270px.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor index 7ae499349..f1d6ae13c 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor @@ -11,17 +11,17 @@ -
    +
    Before using the SortableList component, include the SortableJS script reference in your index.html/_Host.cshtml file.
    -
    +
    -
    +

    To drag-and-drop an item from one list to the other and vice versa, set the Group parameter for all the lists. Providing the same Group name for the lists is what links them together.

    In the below example, both lists use the same Group.

    @@ -34,35 +34,35 @@
    -
    +
    By setting Pull="SortableListPullMode.Clone", you can enable item cloning. Drag an item from one list to another to create a copy that stays in the original list.
    -
    +
    You can disable list sorting by setting AllowSorting="false". In the example below, the list cannot be sorted.
    -
    +
    The Handle parameter specifies the CSS class that denotes the drag handle. In the example below, items can only be sorted by dragging the handle itself.
    -
    +
    Try dragging the red-backgrounded item. You won't be able to, as it's disabled using the DisableItem parameter.
    -
    +
    @*
    *@ @@ -70,12 +70,12 @@
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Spinners/SpinnersDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Spinners/SpinnersDocumentation.razor index a781a2259..b9ad7ea1a 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Spinners/SpinnersDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Spinners/SpinnersDocumentation.razor @@ -11,19 +11,19 @@ -
    +
    Use the border spinners for a lightweight loading indicator.
    -
    +
    The border spinner's border color inherits the element's color (currentColor). This means you can easily customize the spinner's color by changing the Color parameter on the standard spinner.
    -
    +
    If you don't fancy a border spinner, switch to the grow spinner, while it doesn't technically spin, it does repeatedly grow!
    @@ -31,38 +31,38 @@
    -
    +
    The loading dots are a special indicator for a lightweight loading indicator.
    -
    -
    +
    +
    -
    -
    +
    +
    -
    +
    -
    +
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor index 4c708bf0f..e1372d53d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Tabs/TabsDocumentation.razor @@ -11,54 +11,54 @@ -
    +
    -
    +
    To create a fade-in effect for tabs, add the EnableFadeEffect="true" parameter. Additionally, set the IsActive="true" parameter on the first tab pane to display its content initially.
    -
    +
    To customize the tab title, use the TitleTemplate parameter, as demonstrated in the following example.
    -
    +
    Disable specific tabs by adding Disabled="true" parameter.
    -
    +
    To transform the tabs into pills, use the parameter NavStyle="NavStyle.Pills".
    -
    +
    Use the NavStyle="NavStyle.Underline" parameter to change the tabs to an underlined style.
    -
    +
    Display your tabs vertically by setting the NavStyle parameter to NavStyle.Vertical.
    -
    +
    -
    +
    -
    +
    You can activate individual tabs in several ways. Use predefined methods such as ShowFirstTabAsync, ShowLastTabAsync, ShowTabByIndexAsync, and ShowTabByNameAsync, as shown below.
    -
    +
    When displaying a new tab, the events fire in the following sequence:

    @@ -100,23 +100,23 @@

    -
    +
    -
    +
    -
    +
    -
    +
    -
    +
    In the following example, we are deleting tabs dynamically. Ensure that the @@key parameter is added with unique value. diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ThemeSwitcher/ThemeSwitcherDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/ThemeSwitcher/ThemeSwitcherDocumentation.razor new file mode 100644 index 000000000..f2d6128fb --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/ThemeSwitcher/ThemeSwitcherDocumentation.razor @@ -0,0 +1,47 @@ +@attribute [Route(pageUrl)] + + + + + @pageDescription + + + + +
    +
    + In the following example, you will see a theme switcher similar to a dropdown component with three options: Light, Dark, and Auto. +
    + +
    + +
    +
    + By default, the Position is set to DropdownMenuPosition.Start. + You can change the position of the theme switcher by setting the Position parameter to DropdownMenuPosition.End. +
    + +
    + Align the theme switcher to the right to position the dropdown menu on the right side of the button. +
    + +
    + +
    +
    + If you want to perform an action when the theme changes, you can use the OnThemeChanged event. +
    + +
    + +@code { + private const string pageUrl = RouteConstants.Demos_ThemeSwitcher_Documentation; + private const string pageTitle = "Blazor Theme Switcher"; + private const string pageDescription = "Documentation and examples for using the Blazor Bootstrap Theme Switcher component."; + private const string metaTitle = "Blazor Theme Switcher Component"; + private const string metaDescription = "Documentation and examples for using the Blazor Bootstrap Theme Switcher component."; + private const string imageUrl = "https://i.imgur.com/2eixWho.png"; +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ThemeSwitcher/ThemeSwitcher_Demo_01_How_It_Works.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/ThemeSwitcher/ThemeSwitcher_Demo_01_How_It_Works.razor new file mode 100644 index 000000000..57c2d8286 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/ThemeSwitcher/ThemeSwitcher_Demo_01_How_It_Works.razor @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ThemeSwitcher/ThemeSwitcher_Demo_02_Position_A.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/ThemeSwitcher/ThemeSwitcher_Demo_02_Position_A.razor new file mode 100644 index 000000000..b9f0ad4e1 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/ThemeSwitcher/ThemeSwitcher_Demo_02_Position_A.razor @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ThemeSwitcher/ThemeSwitcher_Demo_02_Position_B.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/ThemeSwitcher/ThemeSwitcher_Demo_02_Position_B.razor new file mode 100644 index 000000000..c79c39f34 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/ThemeSwitcher/ThemeSwitcher_Demo_02_Position_B.razor @@ -0,0 +1,3 @@ +
    + +
    \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/ThemeSwitcher/ThemeSwitcher_Demo_03_Events.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/ThemeSwitcher/ThemeSwitcher_Demo_03_Events.razor new file mode 100644 index 000000000..f9cbf4fd0 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/ThemeSwitcher/ThemeSwitcher_Demo_03_Events.razor @@ -0,0 +1,13 @@ + + +@code +{ + [Inject] + ToastService ToastService { get; set; } = default!; + + private void OnThemeChanged(string themeName) + { + // do something when the theme changes + ToastService.Notify(new(ToastType.Success, $"Theme changed to {themeName}")); + } +} diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/ToastsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/ToastsDocumentation.razor index 4aaf04b70..894921b87 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/ToastsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Toasts/ToastsDocumentation.razor @@ -13,44 +13,44 @@
    Blazor Toasts are lightweight notifications designed to mimic the push notifications that mobile and desktop operating systems have popularized. They're built with a flexbox, making it easy to align and position.
    -
    +
    • Blazor Toasts will not hide automatically if you do not specify AutoHide="true".
    • Use global toasts service for the application instead of page level toasts.
    -
    +
    -
    +
    -
    +
    Add AutoHide="true" parameter to hide the Blazor Toasts after the delay. The default delay is 5000 milliseconds, be sure to update the delay timeout so that users have enough time to read the toast.
    -
    +
    Set AutoHide="true" property on ToastMessage to hide individual Blazor Toast message after the delay. The default delay is 5000 milliseconds, be sure to update the delay timeout so that users have enough time to read the toast.
    In the below example, AutoHide="false" for Danger and Warning messages.
    -
    +
    Change the Blazor Toasts placement according to your need. The default placement will be top right corner. Use the ToastsPlacement parameter to update the Blazor Toasts placement.
    -
    +
    Blazor Toasts component shows a maximum of 5 toasts by default. If you add a new toast to the existing list, the first toast gets deleted like FIFO (First In First Out). Change the maximum capacity according to your need by using the StackLength parameter.
    In the below example, StackLength is set to 3. It shows a maximum of 3 toast messages at any time.
    -
    +
    1. Add the Toasts component in MainLayout.razor page as shown below.
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Tooltips/TooltipsDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Tooltips/TooltipsDocumentation.razor index 4acb07eec..107f85a21 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Tooltips/TooltipsDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Tooltips/TooltipsDocumentation.razor @@ -11,11 +11,11 @@ -
    +
    -
    +
    @@ -24,21 +24,21 @@ See Buttons - Tooltip. -
    +
    @* START: Commented Examples *@ -@*
    +@*
    -
    +
    *@ @* END: Commented Examples *@ -
    +
    Blazor Bootstrap includes several predefined tooltip styles, each serving its own semantic purpose. The Color parameter can be used to customize the color of the tooltip. @@ -46,11 +46,11 @@
    -
    +
    -
    +
    diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor b/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor index 41e92cb24..8eddb2996 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor @@ -1,5 +1,5 @@ @namespace BlazorBootstrap.Demo.RCL -@inherits ComponentBase +@inherits BlazorBootstrapComponentBase @if (ShowCodeOnly) { diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor.cs index 8be134615..d2b282d24 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor.cs +++ b/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor.cs @@ -1,6 +1,6 @@ namespace BlazorBootstrap.Demo.RCL; -public partial class Demo : ComponentBase +public partial class Demo : BlazorBootstrapComponentBase { #region Fields and Constants @@ -10,13 +10,13 @@ public partial class Demo : ComponentBase private string? clipboardTooltipTitle = "Copy to clipboard"; - private string? snippet; - /// /// A reference to this component instance for use in JavaScript calls. /// private DotNetObjectReference objRef = default!; + private string? snippet; + #endregion #region Methods @@ -103,6 +103,8 @@ public void ResetCopyStatusJS() #region Properties, Indexers + protected override string? ClassNames => BuildClassNames(Class, ("bd-example-snippet bd-code-snippet", true)); + [Inject] protected IJSRuntime JS { get; set; } = default!; [Parameter] public LanguageCode LanguageCode { get; set; } = LanguageCode.Razor; diff --git a/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs b/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs index 077fae2a8..bc6ddfca0 100644 --- a/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs +++ b/BlazorBootstrap.Demo.RCL/Constants/RouteConstants.cs @@ -79,6 +79,7 @@ public static class RouteConstants public const string Demos_SortableList_Documentation = Demos_Prefix + "/sortable-list"; public const string Demos_Spinners_Documentation = Demos_Prefix + "/spinners"; public const string Demos_Tabs_Documentation = Demos_Prefix + "/tabs"; + public const string Demos_ThemeSwitcher_Documentation = Demos_Prefix + "/theme-switcher"; public const string Demos_Toasts_Documentation = Demos_Prefix + "/toasts"; public const string Demos_Tooltips_Documentation = Demos_Prefix + "/tooltips"; diff --git a/BlazorBootstrap.Demo.Server/appsettings.json b/BlazorBootstrap.Demo.Server/appsettings.json index 16e8a030b..d2c683608 100644 --- a/BlazorBootstrap.Demo.Server/appsettings.json +++ b/BlazorBootstrap.Demo.Server/appsettings.json @@ -6,9 +6,9 @@ } }, "AllowedHosts": "*", - "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/getting-started/blazor-webassembly-net-8", diff --git a/BlazorBootstrap.Demo.WebAssembly/wwwroot/appsettings.json b/BlazorBootstrap.Demo.WebAssembly/wwwroot/appsettings.json index c317275ef..bb6e7f911 100644 --- a/BlazorBootstrap.Demo.WebAssembly/wwwroot/appsettings.json +++ b/BlazorBootstrap.Demo.WebAssembly/wwwroot/appsettings.json @@ -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/getting-started/blazor-webassembly-net-8", diff --git a/README.md b/README.md index e14ec003b..2f1571f1f 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ ## Install -Install with [NuGet](https://www.nuget.org/): `Install-Package Blazor.Bootstrap -Version 3.1.1` +Install with [NuGet](https://www.nuget.org/): `Install-Package Blazor.Bootstrap -Version 3.2.0` ## Install Blazor Bootstrap templates @@ -98,6 +98,7 @@ Install [Blazor Bootstrap templates](https://github.com/vikramlearning/blazorboo | Spinners | [Docs](https://docs.blazorbootstrap.com/components/spinners) | [Demos](https://demos.blazorbootstrap.com/spinners) | | Switch | [Docs](https://docs.blazorbootstrap.com/forms/switch) | [Demos](https://demos.blazorbootstrap.com/form/switch) | | Tabs | [Docs](https://docs.blazorbootstrap.com/components/tabs) | [Demos](https://demos.blazorbootstrap.com/tabs) | +| Theme Switcher | [Docs](https://docs.blazorbootstrap.com/components/theme-switcher) | [Demos](https://demos.blazorbootstrap.com/theme-switcher) | | Time Input | [Docs](https://docs.blazorbootstrap.com/forms/time-input) | [Demos](https://demos.blazorbootstrap.com/form/time-input) | | Toasts | [Docs](https://docs.blazorbootstrap.com/components/toasts) | [Demos](https://demos.blazorbootstrap.com/toasts) | | Tooltips | [Docs](https://docs.blazorbootstrap.com/components/tooltips) | [Demos](https://demos.blazorbootstrap.com/tooltips) | @@ -230,6 +231,9 @@ Blazor Bootstrap's documentation, which is included in this repository's root di ### Blazor Bootstrap - Tabs ![Blazor Bootstrap - Tabs](https://i.imgur.com/NdE5oqH.png "Blazor Bootstrap - Tabs") +### Blazor Bootstrap - Theme Switcher +![Blazor Bootstrap - Theme Switcher](https://i.imgur.com/2eixWho.png "Blazor Bootstrap - Theme Switcher") + ### Blazor Bootstrap - Time Input ![Blazor Bootstrap - Time Input](https://i.imgur.com/TlvjRlP.png "Blazor Bootstrap - Time Input") diff --git a/blazorbootstrap/BlazorBootstrap.csproj b/blazorbootstrap/BlazorBootstrap.csproj index 1f470b5f0..63494e9b3 100644 --- a/blazorbootstrap/BlazorBootstrap.csproj +++ b/blazorbootstrap/BlazorBootstrap.csproj @@ -3,8 +3,8 @@ Blazor.Bootstrap - 3.1.1 - 3.1.1 + 3.2.0 + 3.2.0 Apache-2.0 diff --git a/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor b/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor index cc8ff6d09..7b17523c0 100644 --- a/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor +++ b/blazorbootstrap/Components/ThemeSwitcher/ThemeSwitcher.razor @@ -6,7 +6,7 @@ Toggle theme -
      +