Backdrop: combined UseBackdrop and UseStaticBackdrop to support all options

Author: Mischa Spelt

blazorbootstrap/Components/Offcanvas/Offcanvas.razor

@@ -2,40 +2,40 @@
 @inherits BlazorBootstrapComponentBase
 
 <div @ref="@Element" id="@Id" class="@ClassNames" style="@StyleNames" @attributes="@AdditionalAttributes" tabindex="@TabIndex">
-    @if (!string.IsNullOrWhiteSpace(Title) || HeaderTemplate != null || ShowCloseButton)
-    {
-        <div class="offcanvas-header @HeaderCssClass">
-            @if (!string.IsNullOrWhiteSpace(title))
-            {
-                <h5>@title</h5>
-            }
-            else if (HeaderTemplate is not null)
-            {
-                @HeaderTemplate
-            }
+  @if( !string.IsNullOrWhiteSpace( Title ) || HeaderTemplate != null || ShowCloseButton )
+  {
+    <div class="offcanvas-header @HeaderCssClass">
+      @if( !string.IsNullOrWhiteSpace( title ) )
+      {
+        <h5>@title</h5>
+      }
+      else if( HeaderTemplate is not null )
+      {
+        @HeaderTemplate
+      }
 
-            @if (ShowCloseButton)
-            {
-                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-            }
-        </div>
-    }
-    @if (childComponent is not null)
-    {
-        <div class="offcanvas-body @BodyCssClass">
-            <DynamicComponent Type="@childComponent" Parameters="@parameters"/>
-        </div>
-    }
-    else if (BodyTemplate != null)
-    {
-        <div class="offcanvas-body @BodyCssClass">
-            @BodyTemplate
-        </div>
-    }
-    @if (FooterTemplate != null)
-    {
-        <div class="offcanvas-footer @FooterCssClass">
-            @FooterTemplate
-        </div>
-    }
+      @if( ShowCloseButton )
+      {
+        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      }
+    </div>
+  }
+  @if( childComponent is not null )
+  {
+    <div class="offcanvas-body @BodyCssClass">
+      <DynamicComponent Type="@childComponent" Parameters="@parameters" />
+    </div>
+  }
+  else if( BodyTemplate != null )
+  {
+    <div class="offcanvas-body @BodyCssClass">
+      @BodyTemplate
+    </div>
+  }
+  @if( FooterTemplate != null )
+  {
+    <div class="offcanvas-footer @FooterCssClass">
+      @FooterTemplate
+    </div>
+  }
 </div>

blazorbootstrap/Components/Offcanvas/Offcanvas.razor.cs

@@ -1,4 +1,6 @@
-namespace BlazorBootstrap;
+using System.Reflection.Metadata;
+
+namespace BlazorBootstrap;
 
 public partial class Offcanvas : BlazorBootstrapComponentBase
 {
@@ -40,7 +42,17 @@ protected override async ValueTask DisposeAsyncCore( bool disposing )
   protected override async Task OnAfterRenderAsync( bool firstRender )
   {
     if( firstRender )
-      await JSRuntime.InvokeVoidAsync( "window.blazorBootstrap.offcanvas.initialize", Id, UseStaticBackdrop, CloseOnEscape, IsScrollable, objRef );
+    {
+      object backdrop = Backdrop switch
+      {
+        BackdropType.None => false,
+        BackdropType.Visible => true,
+        BackdropType.Static => "static",
+        _ => throw new InvalidOperationException( "Invalid backdrop value" )
+      };
+
+      await JSRuntime.InvokeVoidAsync( "window.blazorBootstrap.offcanvas.initialize", Id, backdrop, CloseOnEscape, IsScrollable, objRef );
+    }
 
     await base.OnAfterRenderAsync( firstRender );
   }
@@ -284,24 +296,26 @@ public bool IsVisible
   [Parameter]
   public string Title { get; set; } = default!;
 
-  [Obsolete( "Use `UseStaticBackdrop` parameter." )]
-  /// <summary>
-  /// Indicates whether to apply a backdrop on body while offcanvas is open.
-  /// </summary>
-  /// <remarks>
-  /// Default value is true.
-  /// </remarks>
   [Parameter]
-  public bool UseBackdrop { get => this.UseStaticBackdrop; set => this.UseStaticBackdrop = value; }
+  public BackdropType Backdrop { get; set; } = BackdropType.Visible;
 
-  /// <summary>
-  /// When `UseStaticBackdrop` is set to true, the offcanvas will not close when clicking outside of it.
-  /// </summary>
-  /// <remarks>
-  /// Default value is false.
-  /// </remarks>
-  [Parameter]
-  public bool UseStaticBackdrop { get; set; } = true;
+  public enum BackdropType
+  {
+    /// <summary>
+    /// Do not use a backdrop, the page will stay visible.
+    /// </summary>
+    None,
+
+    /// <summary>
+    /// Visible backdrop, the page will be covered by a backdrop
+    /// </summary>
+    Visible,
+
+    /// <summary>
+    /// Static backdrop, the page will be covered by a backdrop and the offcanvas will not close when clicking outside of it.
+    /// </summary>
+    Static
+  }
 
   #endregion
 }