From aea50840790310c4cf7c477f3f898f607d9a279c Mon Sep 17 00:00:00 2001 From: Frans van Dijk Date: Tue, 3 Feb 2026 19:23:35 +0100 Subject: [PATCH 1/3] Added option for responsive offcanvas --- .../Offcanvas/OffcanvasDocumentation.razor | 7 ++++ .../Offcanvas_Demo_07_Responsive.razor | 20 +++++++++++ .../Components/Offcanvas/Offcanvas.razor.cs | 14 +++++++- blazorbootstrap/Constants/BootstrapClass.cs | 2 -- blazorbootstrap/Enums/OffcanvasResponsive.cs | 34 +++++++++++++++++++ blazorbootstrap/Extensions/EnumExtensions.cs | 12 +++++++ 6 files changed, 86 insertions(+), 3 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Offcanvas/Offcanvas_Demo_07_Responsive.razor create mode 100644 blazorbootstrap/Enums/OffcanvasResponsive.cs diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Offcanvas/OffcanvasDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Offcanvas/OffcanvasDocumentation.razor index 2dcf7ec27..df8c3f883 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Offcanvas/OffcanvasDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Offcanvas/OffcanvasDocumentation.razor @@ -64,6 +64,13 @@ +
+
Set the responsive behaviour of the Offcanvas with the Responsive parameter. The default value is OffcanvasResponsive.Always.
+
Responsive offcanvas hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, OffcanvasResponsive.LargeDown hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint. Responsive offcanvas are available for each breakpoint.
+ + Both body and footer will be shown above the responsive breakpoint by default. Optionally use the FooterCssClass parameter to control visibility of the footer. +
+ @code { private const string pageUrl = DemoRouteConstants.Demos_URL_Offcanvas; private const string pageTitle = "Blazor Offcanvas"; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Offcanvas/Offcanvas_Demo_07_Responsive.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Offcanvas/Offcanvas_Demo_07_Responsive.razor new file mode 100644 index 000000000..05d9c5518 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Offcanvas/Offcanvas_Demo_07_Responsive.razor @@ -0,0 +1,20 @@ +Resize your browser to show the responsive offcanvas button. + + + +

This is content within an Offcanvas with OffcanvasResponsive.LargeDown.

+ + + + + + + + +@code { + private Offcanvas offcanvas = default!; + private async Task OnShowOffcanvasClick() => await offcanvas.ShowAsync(); +} diff --git a/blazorbootstrap/Components/Offcanvas/Offcanvas.razor.cs b/blazorbootstrap/Components/Offcanvas/Offcanvas.razor.cs index f84ebc3c8..d70eb19aa 100644 --- a/blazorbootstrap/Components/Offcanvas/Offcanvas.razor.cs +++ b/blazorbootstrap/Components/Offcanvas/Offcanvas.razor.cs @@ -107,7 +107,7 @@ private async Task ShowAsync(string? title, Type? type, Dictionary BuildClassNames(Class, - (BootstrapClass.Offcanvas, true), + (Responsive.ToOffcanvasResponsiveClass(), true), (Placement.ToOffcanvasPlacementClass(), true), (Size.ToOffcanvasSizeClass(), true)); @@ -251,6 +251,18 @@ private async Task ShowAsync(string? title, Type? type, Dictionary + /// Gets or sets the offcanvas responsive behavior. + /// + /// + /// Default value is . + /// + [AddedVersion("3.6.0")] + [DefaultValue(OffcanvasResponsive.Always)] + [Description("Gets or sets the offcanvas responsive behavior.")] + [Parameter] + public OffcanvasResponsive Responsive { get; set; } = OffcanvasResponsive.Always; + /// /// If , modal shows close button in the header. /// diff --git a/blazorbootstrap/Constants/BootstrapClass.cs b/blazorbootstrap/Constants/BootstrapClass.cs index d8ee08c56..3355b9f55 100644 --- a/blazorbootstrap/Constants/BootstrapClass.cs +++ b/blazorbootstrap/Constants/BootstrapClass.cs @@ -114,8 +114,6 @@ public static class BootstrapClass public const string NavTabs = "nav-tabs"; public const string NavUnderline = "nav-underline"; - public const string Offcanvas = "offcanvas"; - public const string PageLoadingModal = "modal-page-loading"; public const string Pagination = "pagination"; diff --git a/blazorbootstrap/Enums/OffcanvasResponsive.cs b/blazorbootstrap/Enums/OffcanvasResponsive.cs new file mode 100644 index 000000000..b52139764 --- /dev/null +++ b/blazorbootstrap/Enums/OffcanvasResponsive.cs @@ -0,0 +1,34 @@ +namespace BlazorBootstrap; + +public enum OffcanvasResponsive +{ + /// + /// Always hide content offcanvas. + /// + Always, + + /// + /// Hide content offcanvas bellow "small" breakpoint (576px). + /// + SmallDown, + + /// + /// Hide content offcanvas bellow "medium" breakpoint (768px). + /// + MediumDown, + + /// + /// Hide content offcanvas bellow "large" breakpoint (992px). + /// + LargeDown, + + /// + /// Hide content offcanvas bellow "extra-large" breakpoint (1200px). + /// + ExtraLargeDown, + + /// + /// Hide content offcanvas bellow "XXL" breakpoint (1400px). + /// + ExtraExtraLargeDown +} diff --git a/blazorbootstrap/Extensions/EnumExtensions.cs b/blazorbootstrap/Extensions/EnumExtensions.cs index 336389fd6..b0181d4da 100644 --- a/blazorbootstrap/Extensions/EnumExtensions.cs +++ b/blazorbootstrap/Extensions/EnumExtensions.cs @@ -353,6 +353,18 @@ public static string ToOffcanvasPlacementClass(this Placement placement) => _ => "offcanvas-bottom" }; + public static string ToOffcanvasResponsiveClass(this OffcanvasResponsive offcanvasResponsive) => + offcanvasResponsive switch + { + OffcanvasResponsive.Always => "offcanvas", + OffcanvasResponsive.SmallDown => "offcanvas-sm", + OffcanvasResponsive.MediumDown => "offcanvas-md", + OffcanvasResponsive.LargeDown => "offcanvas-lg", + OffcanvasResponsive.ExtraLargeDown => "offcanvas-xl", + OffcanvasResponsive.ExtraExtraLargeDown => "offcanvas-xxl", + _ => "offcanvas" + }; + public static string ToOffcanvasSizeClass(this OffcanvasSize offcanvasSize) => offcanvasSize switch { From 29c9f052dde7b67593a6fbb1bf0a5965765fbbdd Mon Sep 17 00:00:00 2001 From: Frans van Dijk Date: Tue, 3 Feb 2026 20:04:17 +0100 Subject: [PATCH 2/3] Fix close button in header Added data-bs-target with ID, as in Bootstrap example for responsive https://getbootstrap.com/docs/5.3/components/offcanvas/#responsive --- blazorbootstrap/Components/Offcanvas/Offcanvas.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazorbootstrap/Components/Offcanvas/Offcanvas.razor b/blazorbootstrap/Components/Offcanvas/Offcanvas.razor index c88ac52e7..ec81c4607 100644 --- a/blazorbootstrap/Components/Offcanvas/Offcanvas.razor +++ b/blazorbootstrap/Components/Offcanvas/Offcanvas.razor @@ -16,7 +16,7 @@ @if (ShowCloseButton) { - + } } From 41600b95ed184311e154a9569e074fd2aed44dd7 Mon Sep 17 00:00:00 2001 From: Frans van Dijk Date: Tue, 3 Feb 2026 20:24:17 +0100 Subject: [PATCH 3/3] Fix copy-paste error, wrong link value in new documentation section. --- .../Pages/Demos/Offcanvas/OffcanvasDocumentation.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Offcanvas/OffcanvasDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Offcanvas/OffcanvasDocumentation.razor index df8c3f883..73b877ab1 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Offcanvas/OffcanvasDocumentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Demos/Offcanvas/OffcanvasDocumentation.razor @@ -64,7 +64,7 @@ -
+
Set the responsive behaviour of the Offcanvas with the Responsive parameter. The default value is OffcanvasResponsive.Always.
Responsive offcanvas hide content outside the viewport from a specified breakpoint and down. Above that breakpoint, the contents within will behave as usual. For example, OffcanvasResponsive.LargeDown hides content in an offcanvas below the lg breakpoint, but shows the content above the lg breakpoint. Responsive offcanvas are available for each breakpoint.