diff --git a/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor b/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor index bb0a0e4d497..9667be9c71f 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor @@ -9,10 +9,19 @@
- -
@Localizer["ScrollNormalDescription"]
-
@Localizer["ScrollNormalBottom"]
+ +
@Localizer["ScrollNormalDescription"]
+
+
+
+
+
+
@Localizer["ScrollNormalBottom"]
 + +
+ +
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor.cs index bb9955d848a..c1367d65615 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/Scrolls.razor.cs @@ -33,4 +33,9 @@ private AttributeItem[] GetAttributes() => DefaultValue = " — " } ]; + + [NotNull] + private Scroll? _scroll = null; + + private Task ScrollToBottom() => _scroll.ScrollToBottom(); } diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index b0a740221e1..2cce97820e4 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -1335,8 +1335,9 @@ "ScrollTitle": "Scroll", "ScrollDescription": "Add scroll bars to components whose height or width exceeds the standard", "ScrollTips": "The scroll bar can be rendered only when its element has a fixed height. Its height attribute can be set through the coat element", + "ScrollToBottom": "Scroll to bottom", "ScrollNormalTitle": "Common usage", - "ScrollNormalIntro": "Add a scroll bar to the component. By setting the height of Height to 200px, the scroll bar appears when the height of the inner child element is 400px", + "ScrollNormalIntro": "Add a scroll bar to the component. By setting the height of Height to 200px, the scroll bar appears when the height of the inner child element is 500px", "Desc1": "Subassembly", "Desc2": "Component height", "ScrollNormalDescription": "Please scroll the scroll bar on the right", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 2fc69848e37..28692348b43 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -1335,8 +1335,9 @@ "ScrollTitle": "Scroll 滚动条", "ScrollDescription": "给高度或者宽度超标的组件增加滚动条", "ScrollTips": "其元素必须拥有固定高度时才可呈现滚动条，可以通过外套元素设置其 height 属性", + "ScrollToBottom": "滚动到底部", "ScrollNormalTitle": "普通用法", - "ScrollNormalIntro": "给组件增加滚动条，通过设置 Height 高度值为 200px 使内部子元素高度为 400px 时出现滚动条", + "ScrollNormalIntro": "给组件增加滚动条，通过设置 Height 高度值为 200px 使内部子元素高度为 500px 时出现滚动条", "Desc1": "子组件", "Desc2": "组件高度", "ScrollNormalDescription": "请滚动右侧滚动条", diff --git a/src/BootstrapBlazor/Components/Scroll/Scroll.razor b/src/BootstrapBlazor/Components/Scroll/Scroll.razor index 470a443dc9e..48aa041b72e 100644 --- a/src/BootstrapBlazor/Components/Scroll/Scroll.razor +++ b/src/BootstrapBlazor/Components/Scroll/Scroll.razor @@ -1,6 +1,7 @@ @namespace BootstrapBlazor.Components -@inherits BootstrapComponentBase +@inherits BootstrapModuleComponentBase +@attribute [BootstrapModuleAutoLoader(AutoInvokeInit = false, AutoInvokeDispose = false)] -
+
@ChildContent
diff --git a/src/BootstrapBlazor/Components/Scroll/Scroll.razor.cs b/src/BootstrapBlazor/Components/Scroll/Scroll.razor.cs index 38270b46b62..c460d02ca27 100644 --- a/src/BootstrapBlazor/Components/Scroll/Scroll.razor.cs +++ b/src/BootstrapBlazor/Components/Scroll/Scroll.razor.cs @@ -59,4 +59,9 @@ public partial class Scroll [Inject] [NotNull] private IOptionsMonitor? Options { get; set; } + + /// + /// 滚动到底部 + /// + public Task ScrollToBottom() => InvokeVoidAsync("scrollToBottom", Id); } diff --git a/src/BootstrapBlazor/Components/Scroll/Scroll.razor.js b/src/BootstrapBlazor/Components/Scroll/Scroll.razor.js new file mode 100644 index 00000000000..652aac0461e --- /dev/null +++ b/src/BootstrapBlazor/Components/Scroll/Scroll.razor.js @@ -0,0 +1,9 @@ +export function scrollToBottom(id) { + const el = document.getElementById(id); + const top = el.scrollHeight; + el.scrollTo({ + top, + left: 0, + behavior: "smooth" + }); +} diff --git a/test/UnitTest/Components/ScrollTest.cs b/test/UnitTest/Components/ScrollTest.cs index 9a25ad512ac..d7f05bc549f 100644 --- a/test/UnitTest/Components/ScrollTest.cs +++ b/test/UnitTest/Components/ScrollTest.cs @@ -5,7 +5,7 @@ namespace UnitTest.Components; -public class ScrollTest : TestBase +public class ScrollTest : BootstrapBlazorTestBase { [Fact] public void Height_Ok() @@ -31,20 +31,20 @@ public void ScrollWidth_Ok() builder.Add(a => a.Width, "500px"); }); - Assert.Equal("
", cut.Markup); + Assert.Contains("style=\"width: 500px; --bb-scroll-width: 5px; --bb-scroll-hover-width: 5px;\"", cut.Markup); cut.SetParametersAndRender(builder => { builder.Add(a => a.ScrollWidth, 6); }); - Assert.Equal("
", cut.Markup); + Assert.Contains("style=\"width: 500px; --bb-scroll-width: 6px; --bb-scroll-hover-width: 5px;\"", cut.Markup); cut.SetParametersAndRender(builder => { builder.Add(a => a.ScrollWidth, 6); builder.Add(a => a.ScrollHoverWidth, 12); }); - Assert.Equal("
", cut.Markup); + Assert.Contains("style=\"width: 500px; --bb-scroll-width: 6px; --bb-scroll-hover-width: 12px;\"", cut.Markup); } [Fact] @@ -59,4 +59,17 @@ public void ChildContent_Ok() Assert.Contains("I am scroll", cut.Markup); } + + [Fact] + public async Task ScrollToBottom_Ok() + { + var cut = Context.RenderComponent(builder => builder.Add(a => a.ChildContent, r => + { + r.OpenElement(0, "div"); + r.AddContent(1, "I am scroll"); + r.CloseComponent(); + })); + + await cut.InvokeAsync(() => cut.Instance.ScrollToBottom()); + } }