feat(Drawer): add BodyScroll parameter (#5311)

* feat: 增加 BodyScroll 参数

* doc: 增加示例

* test: 增加单元测试

* doc: 增加示例代码资源文件

Co-Authored-By: ice6 <[email protected]>

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Drawers.razor

@@ -59,6 +59,18 @@
     </Drawer>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["BodyScrollTitle"]" Introduction="@Localizer["BodyScrollIntro"]" Name="BodyScroll">
+    <section ignore>
+        <button type="button" class="btn btn-primary" @onclick="@OpenBodyScrollDrawer">@Localizer["Open"]</button>
+    </section>
+    <Drawer Placement="Placement.Left" @bind-IsOpen="@IsBodyScrollOpen" BodyScroll="true">
+        <div class="d-flex justify-content-center align-items-center flex-column" style="height: 290px;">
+            <p>@Localizer["Content"]</p>
+            <button type="button" class="btn btn-primary" @onclick="@(e => IsBodyScrollOpen = false)">@Localizer["Close"]</button>
+        </div>
+    </Drawer>
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["DrawerServiceTitle"]" Introduction="@Localizer["DrawerServiceIntro"]" Name="DrawerService">
     <Button OnClickWithoutRender="@DrawerServiceShow" Text="@Localizer["Open"]"></Button>
 </DemoBlock>

src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs

@@ -57,6 +57,10 @@ private void OpenDrawer()
 
     private void OpenKeyboardDrawer() => IsKeyboardOpen = true;
 
+    private bool IsBodyScrollOpen { get; set; }
+
+    private void OpenBodyScrollDrawer() => IsBodyScrollOpen = true;
+
     private async Task DrawerServiceShow() => await DrawerService.Show(new DrawerOption()
     {
         Placement = Placement.Right,
@@ -137,6 +141,14 @@ private static AttributeItem[] GetAttributes() =>
             DefaultValue = " — "
         },
         new()
+        {
+            Name = "BodyScroll",
+            Description = "Where the enable body scrolling when drawer is shown",
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new()
         {
             Name = "ChildContent",
             Description = "Subassembly",

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -894,6 +894,8 @@
     "DrawerServiceIntro": "Open the drawer pop-up window by calling the <code>DrawerService</code> service",
     "IsKeyboardTitle": "ESC",
     "IsKeyboardIntro": "By default, the component uses the <kbd>ESC</kbd> key to close the drawer popup. You can enable this function by <code>IsKeyboard=\"true\"</code>",
+    "BodyScrollTitle": "Body Scroll",
+    "BodyScrollIntro": "By setting <code>BodyScroll</code>, you can control whether scrolling is allowed when the drawer pop-up window is displayed. <code>Body</code> is false by default, scrolling is not allowed",
     "Open": "click me to open",
     "Content": "The layout, components, etc. in the drawer are fully customizable",
     "Close": "close the drawer",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -894,6 +894,8 @@
     "DrawerServiceIntro": "通过调用 <code>DrawerService</code> 服务打开抽屉弹窗",
     "IsKeyboardTitle": "ESC 按键支持",
     "IsKeyboardIntro": "组件默认使用 <kbd>ESC</kbd> 按键关闭抽屉弹窗，可通过 <code>IsKeyboard=\"true\"</code> 开启此功能",
+    "BodyScrollTitle": "页面滚动",
+    "BodyScrollIntro": "通过设置 <code>BodyScroll</code> 控制抽屉弹窗显示时是否允许滚动 <code>Body</code> 默认 false 不允许滚动",
     "Open": "点我打开",
     "Content": "抽屉内布局、组件等完全可以自定义",
     "Close": "关闭抽屉",

src/BootstrapBlazor/Components/Drawer/Drawer.razor

@@ -2,7 +2,8 @@
 @inherits BootstrapModuleComponentBase
 @attribute [BootstrapModuleAutoLoader(JSObjectReference = true)]
 
-<div @attributes="@AdditionalAttributes" tabindex="-1" class="@ClassString" style="@StyleString" id="@Id" data-bb-keyboard="@KeyboardString">
+<div @attributes="@AdditionalAttributes" tabindex="-1" class="@ClassString" style="@StyleString" id="@Id"
+     data-bb-keyboard="@KeyboardString" data-bb-scroll="@BodyScrollString">
     @if (ShowBackdrop)
     {
         <div tabindex="-1" class="drawer-backdrop" @onclick="@OnContainerClick">

src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs

@@ -125,8 +125,16 @@ public partial class Drawer
     [Parameter]
     public bool IsKeyboard { get; set; }
 
+    /// <summary>
+    /// 获得/设置 抽屉显示时是否允许滚动 body 默认为 false 不滚动
+    /// </summary>
+    [Parameter]
+    public bool BodyScroll { get; set; }
+
     private string? KeyboardString => IsKeyboard ? "true" : null;
 
+    private string? BodyScrollString => BodyScroll ? "true" : null;   
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>

src/BootstrapBlazor/Components/Drawer/Drawer.razor.js

@@ -115,13 +115,17 @@ export function execute(id, open) {
         }
         else {
             el.classList.remove('show')
-            body.classList.remove('overflow-hidden')
+            body.classList.remove('drawer-overflow-hidden')
         }
     }
 
     if (open) {
         el.classList.add('show')
-        body.classList.add('overflow-hidden')
+
+        const scroll = el.getAttribute('data-bb-scroll') === "true";
+        if (scroll === false) {
+            body.classList.add('drawer-overflow-hidden');
+        }
         requestAnimationFrame(show)
     }
     else if (el.classList.contains('show')) {

src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss

@@ -184,3 +184,7 @@
         }
     }
 }
+
+.drawer-overflow-hidden {
+    overflow: hidden;
+}

src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs

@@ -66,6 +66,7 @@ private Dictionary<string, object> GetParameters(DrawerOption option)
         {
             [nameof(Drawer.IsOpen)] = true,
             [nameof(Drawer.IsKeyboard)] = option.IsKeyboard,
+            [nameof(Drawer.BodyScroll)] = option.BodyScroll,
             [nameof(Drawer.IsBackdrop)] = option.IsBackdrop,
             [nameof(Drawer.ShowBackdrop)] = option.ShowBackdrop,
             [nameof(Drawer.Placement)] = option.Placement,

src/BootstrapBlazor/Components/Drawer/DrawerOption.cs

@@ -40,6 +40,11 @@ public class DrawerOption
     /// </summary>
     public bool ShowBackdrop { get; set; } = true;
 
+    /// <summary>
+    /// 获得/设置 抽屉显示时是否允许滚动 body 默认为 false 不滚动
+    /// </summary>
+    public bool BodyScroll { get; set; }
+
     /// <summary>
     /// 获得/设置 组件出现位置 默认显示在 Left 位置
     /// </summary>