diff --git a/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor b/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor index c5f1badc5a3..8d2844abe3a 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor @@ -59,6 +59,18 @@ + +
+ +
+ +
+

@Localizer["Content"]

+ +
+
+
+ diff --git a/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs index 2e4ed87b4b9..8bdbadad442 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Drawers.razor.cs +++ b/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", diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 74bc53e1884..2f985a9ef14 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -894,6 +894,8 @@ "DrawerServiceIntro": "Open the drawer pop-up window by calling the DrawerService service", "IsKeyboardTitle": "ESC", "IsKeyboardIntro": "By default, the component uses the ESC key to close the drawer popup. You can enable this function by IsKeyboard=\"true\"", + "BodyScrollTitle": "Body Scroll", + "BodyScrollIntro": "By setting BodyScroll, you can control whether scrolling is allowed when the drawer pop-up window is displayed. Body 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", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 2b4d3f0598e..0f3fca089e3 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -894,6 +894,8 @@ "DrawerServiceIntro": "通过调用 DrawerService 服务打开抽屉弹窗", "IsKeyboardTitle": "ESC 按键支持", "IsKeyboardIntro": "组件默认使用 ESC 按键关闭抽屉弹窗,可通过 IsKeyboard=\"true\" 开启此功能", + "BodyScrollTitle": "页面滚动", + "BodyScrollIntro": "通过设置 BodyScroll 控制抽屉弹窗显示时是否允许滚动 Body 默认 false 不允许滚动", "Open": "点我打开", "Content": "抽屉内布局、组件等完全可以自定义", "Close": "关闭抽屉", diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor b/src/BootstrapBlazor/Components/Drawer/Drawer.razor index addc7b8a074..12948be0e13 100644 --- a/src/BootstrapBlazor/Components/Drawer/Drawer.razor +++ b/src/BootstrapBlazor/Components/Drawer/Drawer.razor @@ -2,7 +2,8 @@ @inherits BootstrapModuleComponentBase @attribute [BootstrapModuleAutoLoader(JSObjectReference = true)] -
+
@if (ShowBackdrop) {
diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs index a4e32e5ad83..4ebf8aca239 100644 --- a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs +++ b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.cs @@ -125,8 +125,16 @@ public partial class Drawer [Parameter] public bool IsKeyboard { get; set; } + /// + /// 获得/设置 抽屉显示时是否允许滚动 body 默认为 false 不滚动 + /// + [Parameter] + public bool BodyScroll { get; set; } + private string? KeyboardString => IsKeyboard ? "true" : null; + private string? BodyScrollString => BodyScroll ? "true" : null; + /// /// /// diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.js b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.js index 9b021754c74..14dea40da52 100644 --- a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.js +++ b/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')) { diff --git a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss index 697e94e9bd1..d5357d23cb3 100644 --- a/src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss +++ b/src/BootstrapBlazor/Components/Drawer/Drawer.razor.scss @@ -184,3 +184,7 @@ } } } + +.drawer-overflow-hidden { + overflow: hidden; +} diff --git a/src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs b/src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs index 0a50a68085e..dd515189dd7 100644 --- a/src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs +++ b/src/BootstrapBlazor/Components/Drawer/DrawerContainer.cs @@ -66,6 +66,7 @@ private Dictionary 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, diff --git a/src/BootstrapBlazor/Components/Drawer/DrawerOption.cs b/src/BootstrapBlazor/Components/Drawer/DrawerOption.cs index 0e489ce343d..85616fbe148 100644 --- a/src/BootstrapBlazor/Components/Drawer/DrawerOption.cs +++ b/src/BootstrapBlazor/Components/Drawer/DrawerOption.cs @@ -40,6 +40,11 @@ public class DrawerOption /// public bool ShowBackdrop { get; set; } = true; + /// + /// 获得/设置 抽屉显示时是否允许滚动 body 默认为 false 不滚动 + /// + public bool BodyScroll { get; set; } + /// /// 获得/设置 组件出现位置 默认显示在 Left 位置 /// diff --git a/test/UnitTest/Components/DrawerTest.cs b/test/UnitTest/Components/DrawerTest.cs index 05293683e62..36dc900cc0c 100644 --- a/test/UnitTest/Components/DrawerTest.cs +++ b/test/UnitTest/Components/DrawerTest.cs @@ -182,6 +182,21 @@ public void IsKeyboard_Ok() cut.DoesNotContain("data-bb-keyboard=\"true\""); } + [Fact] + public void BodyScroll_Ok() + { + var cut = Context.RenderComponent(builder => + { + builder.Add(a => a.BodyScroll, true); + builder.Add(a => a.ChildContent, s => + { + s.OpenComponent