diff --git a/src/BootstrapBlazor.Shared/Components/Samples/Splits.razor b/src/BootstrapBlazor.Shared/Components/Samples/Splits.razor index b7d22ff8126..29148b3f492 100644 --- a/src/BootstrapBlazor.Shared/Components/Samples/Splits.razor +++ b/src/BootstrapBlazor.Shared/Components/Samples/Splits.razor @@ -122,4 +122,24 @@ + +
+ + + +
+
+ + +
@Localizer["SplitsPanel1"]
+ + +
@Localizer["SplitsPanel2"]
+ + +
+ + diff --git a/src/BootstrapBlazor.Shared/Components/Samples/Splits.razor.cs b/src/BootstrapBlazor.Shared/Components/Samples/Splits.razor.cs index 155e4963e65..b5af87f4e30 100644 --- a/src/BootstrapBlazor.Shared/Components/Samples/Splits.razor.cs +++ b/src/BootstrapBlazor.Shared/Components/Samples/Splits.razor.cs @@ -52,6 +52,10 @@ private Task OnResizedAsync(SplitterResizedEventArgs args) return Task.CompletedTask; } + private Split Split1 = default!; + + private Task OnSetLeft(string leftWidth) => Split1.SetLeftWidth(leftWidth); + /// /// 获得属性方法 /// diff --git a/src/BootstrapBlazor.Shared/Components/Samples/Splittings.razor b/src/BootstrapBlazor.Shared/Components/Samples/Splittings.razor index ef4ead056a8..d943de1a5cb 100644 --- a/src/BootstrapBlazor.Shared/Components/Samples/Splittings.razor +++ b/src/BootstrapBlazor.Shared/Components/Samples/Splittings.razor @@ -39,13 +39,13 @@ Introduction="@Localizer["SplittingColumnsIntro"]" Name="Columns">
-

+

-

+
diff --git a/src/BootstrapBlazor.Shared/Locales/en-US.json b/src/BootstrapBlazor.Shared/Locales/en-US.json index b32e8193d6f..e6191fa36a2 100644 --- a/src/BootstrapBlazor.Shared/Locales/en-US.json +++ b/src/BootstrapBlazor.Shared/Locales/en-US.json @@ -1742,7 +1742,9 @@ "SplitsCollapsibleTrue": "Collapse button shown", "SplitsCollapsibleFalse": "Collapse button hidden", "SplitsFirstPaneMinimumSize": "The minimum size of the first pane supports any unit such as 10px 20% 5em 1rem. If no unit is provided, it defaults to px.", - "SplitsSecondPaneMinimumSize": "The minimum size of the second pane supports any unit such as 10px 20% 5em 1rem. If no unit is provided, it defaults to px." + "SplitsSecondPaneMinimumSize": "The minimum size of the second pane supports any unit such as 10px 20% 5em 1rem. If no unit is provided, it defaults to px.", + "SplitSetLeftTitle": "Code to set panel width", + "SplitSetLeftIntro": "Use the component instance method SetLeftWidth to set the width of the left/top panel, and the width of the right/bottom panel will be adaptive" }, "BootstrapBlazor.Shared.Components.Samples.Dropdowns": { "Title": "Dropdown", diff --git a/src/BootstrapBlazor.Shared/Locales/zh-CN.json b/src/BootstrapBlazor.Shared/Locales/zh-CN.json index 137b52e0efd..11d41d27de7 100644 --- a/src/BootstrapBlazor.Shared/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Shared/Locales/zh-CN.json @@ -1742,7 +1742,9 @@ "SplitsCollapsibleTrue": "显示调整按钮", "SplitsCollapsibleFalse": "隐藏调整按钮", "SplitsFirstPaneMinimumSize": "第一个窗格最小尺寸支持任意单位如 10px 20% 5em 1rem 未提供单位时默认为 px", - "SplitsSecondPaneMinimumSize": "第二个窗格最小尺寸支持任意单位如 10px 20% 5em 1rem 未提供单位时默认为 px" + "SplitsSecondPaneMinimumSize": "第二个窗格最小尺寸支持任意单位如 10px 20% 5em 1rem 未提供单位时默认为 px", + "SplitSetLeftTitle": "代码设置面板宽度", + "SplitSetLeftIntro": "通过组件实例方法 SetLeftWidth 设置左侧/上侧面板宽度，右侧/下侧面板宽度自适应" }, "BootstrapBlazor.Shared.Components.Samples.Dropdowns": { "Title": "Dropdown 下拉菜单", diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index 22686dd7d98..bb6d49653b5 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@ - 9.1.3-beta03 + 9.1.3-beta04 diff --git a/src/BootstrapBlazor/Components/Split/Split.razor.cs b/src/BootstrapBlazor/Components/Split/Split.razor.cs index dcf06b7c31e..bbb9a263971 100644 --- a/src/BootstrapBlazor/Components/Split/Split.razor.cs +++ b/src/BootstrapBlazor/Components/Split/Split.razor.cs @@ -124,6 +124,13 @@ protected override async Task OnAfterRenderAsync(bool firstRender) IsKeepOriginalSize }); + /// + /// 设置左侧窗格宽度 + /// + /// 可以是百分比或者其他单位 + /// + public Task SetLeftWidth(string leftWidth) => InvokeVoidAsync("setLeft", Id, leftWidth); + /// /// 窗格折叠时回调方法 由 JavaScript 调用 /// diff --git a/src/BootstrapBlazor/Components/Split/Split.razor.js b/src/BootstrapBlazor/Components/Split/Split.razor.js index 2d5b886458d..aaafa748e32 100644 --- a/src/BootstrapBlazor/Components/Split/Split.razor.js +++ b/src/BootstrapBlazor/Components/Split/Split.razor.js @@ -170,6 +170,13 @@ const getMax = split => { return ret; } +export function setLeft(id, leftBasis) { + const split = Data.get(id) + if (split) { + split.splitLeft.style.setProperty('flex-basis', leftBasis); + } +} + const setLeftBasis = (split, triggerLeft) => { const { option, splitLeft, invoke, method } = split; let leftBasis = splitLeft.style.flexBasis; diff --git a/test/UnitTest/Components/SplitTest.cs b/test/UnitTest/Components/SplitTest.cs index bde4e35c14f..718bd1ac76f 100644 --- a/test/UnitTest/Components/SplitTest.cs +++ b/test/UnitTest/Components/SplitTest.cs @@ -109,6 +109,17 @@ public async Task OnResizedAsync_Ok() Assert.False(state.IsCollapsed); } + [Fact] + public async Task SetLeft_Ok() + { + var cut = Context.RenderComponent(pb => + { + pb.Add(b => b.FirstPaneTemplate, RenderSplitView("I am Pane1")); + pb.Add(b => b.SecondPaneTemplate, RenderSplitView("I am Pane2")); + }); + await cut.InvokeAsync(() => cut.Instance.SetLeftWidth("25%")); + } + static RenderFragment RenderSplitView(string name = "I am Pane1") => builder => { builder.OpenElement(1, "div");