UI组件前端【免费下载链接】ant-design-blazorA rich set of enterprise-class UI components based on Ant Design and Blazor.项目地址https://gitcode.com/gh_mirrors/an/ant-design-blazor点击查看免费下载导读本文围绕 ant-design-blazor 仓库中 Splitter 组件的“垂直方向Vertical”示例vertical.md展开讲解如何通过SplitterLayout.Vertical让两个面板上下排列并自由拖拽调整高度同时深入源码剖析其背后的 CSS 布局与 JS 拖拽实现。读完本文你将掌握 Splitter 垂直布局的完整用法、Layout参数与SplitterPanel面板参数的搭配方式并能从实现层面理解垂直拖拽是如何工作的。一、垂直方向 Demo核心内容速览在 site/AntDesign.Docs/Demos/Experimental/Splitter 目录下Splitter 组件共提供四个演示用例其中order: 3的 vertical 演示对应的说明文档 vertical.md 内容如下中文说明使用垂直布局。英文说明Use vertical layout.这是整组演示中专门展示“垂直布局”的示例默认情况下 Splitter 以水平方向左右分栏排列面板而本示例通过设置Layout参数为SplitterLayout.Vertical将两个面板改为上下排列分隔条也由竖条变为可上下拖拽的横条是编写上下分栏页面如上方工具栏 下方内容区、顶部面板 底部面板的起点。二、完整可运行示例代码垂直布局的演示代码位于 Vertical.razor核心片段如下Splitter LayoutSplitterLayout.Vertical Styleheight: 200px; box-shadow:0 0 10px rgba(0, 0, 0, 0.1) SplitterPanel Desc(First) /SplitterPanel SplitterPanel Desc(Second) /SplitterPanel /Splitter要点拆解LayoutSplitterLayout.Vertical是垂直布局的唯一开关。省略该参数时Layout默认取SplitterLayout.Horizontal见 Splitter.razor.cs面板左右排列设置为Vertical后面板上下排列。容器高度必须显式指定。示例中通过Styleheight: 200px固定了 Splitter 容器的高度垂直布局时面板的尺寸分配高度百分比、最小高度等都基于这个容器高度计算同时用box-shadow增强演示的视觉边界感。两个SplitterPanel的顺序即渲染顺序。第一个面板渲染在上方第二个渲染在下方与水平布局中的“左/右”语义对应详见 Splitter.razor 的渲染结构。面板内容使用FlexTitle居中展示文字属于演示自身的样式装饰与 Splitter 核心行为无关实际项目中可替换为任意业务内容。三、Layout 参数与 SplitterLayout 枚举详解Layout参数的类型是 SplitterLayout.cs 中定义的枚举仅有两个取值枚举值布局效果分隔条形态拖拽方向SplitterLayout.Horizontal默认面板左右排列水平方向扩展垂直竖条左右拖拽水平方向调整宽度SplitterLayout.Vertical面板上下排列垂直方向扩展水平横条上下拖拽垂直方向调整高度在 Splitter.razor.cs 的OnInitialized中组件根据Layout值向ClassMapper追加不同的样式类ClassMapper.Add(${_prefixCls}) .If(${_prefixCls}-horizontal, () Layout SplitterLayout.Horizontal) .If(${_prefixCls}-vertical, () Layout SplitterLayout.Vertical);因此垂直布局时容器会获得ant-splitter-vertical类对应样式表 style/index.less 中的.ant-splitter-vertical规则拖拽手柄使用cursor: row-resize上下拖拽光标分隔条区域的宽高样式也随布局方向切换。四、垂直布局的底层实现原理4.1 布局骨架flex 容器的 row/column 切换从 Splitter.razor 的模板看Splitter 渲染为一个div.split-container内部依次渲染“第一个面板 → 分隔条 bar → 第二个面板”。布局方向完全由 flex 主轴方向决定水平布局左右分栏flex-direction: row垂直布局上下分栏flex-direction: column这两条规则分别定义在 style/index.less 的.splitter-orientation-vertical与.splitter-orientation-horizontal类中。值得说明的是这里的orientation命名以分隔条的方向为参照竖条左右分栏对应vertical横条上下分栏对应horizontal与ant-splitter-vertical/horizontal以面板布局方向命名的体系恰好相反阅读源码时需要注意区分。面板本身的尺寸样式由 Splitter.razor.cs 的GetPaneStyle方法生成垂直布局时写入的是min-height/height水平布局时写入min-width/widthinternal string GetPaneStyle(string paneSize, string minPaneSize) { var styleKey Vertical ? width : height; ... }注意这里名为Vertical的私有属性实际判断的是“分隔条是否为竖条”即Layout SplitterLayout.Horizontal见 Splitter.razor.cs从源码结构看这是一个命名上容易引起误解的内部实现细节但最终效果与Layout的公开语义保持一致。4.2 拖拽逻辑JS 侧按方向选择坐标轴Splitter 的拖拽行为由 splitterHelper.ts 实现。组件首次渲染后通过JSInteropConstants.SplitterHelper.Attach见 JSInteropConstants.cs把 DOM 容器和 .NET 引用交给 JS 侧绑定指针事件。垂直布局时JS 侧通过容器上的splitter-orientation-horizontal类判定“横条模式”splitterHelper.ts从而指针位置取ev.clientY即纵向坐标splitterHelper.ts目标尺寸取面板的height高度增量计算后写入两个面板的height样式splitterHelper.ts拖拽过程中实时更新两个面板高度并在pointerup时把最终尺寸数组回传给 .NETsplitterHelper.ts。4.3 尺寸回传与状态同步JS 侧通过component.invokeMethodAsync(UpdateSize, sizes)调用 .NET 侧的 UpdateSize 方法标有[JSInvokable]将最新尺寸写入两个SplitterPanel的Size属性并在绑定了OnResize委托时触发EventCallbackstring[]。这样即使面板尺寸由 JS 驱动.NET 侧的组件状态也能保持一致为受控模式见下文提供了数据基础。五、SplitterPanel 面板参数与垂直布局搭配使用面板组件 SplitterPanel.cs 提供以下参数垂直布局下同样适用只是“尺寸”语义从宽度变为高度参数类型默认值说明Sizestring50%面板初始尺寸。垂直布局下即初始高度支持px/%Minstring无面板最小尺寸如Min20%拖拽时不可越过该边界Maxstring无面板最大尺寸DefaultSizestring无面板默认尺寸从源码结构看该参数当前尚未被Splitter消费使用前建议以Size为准Collapsibleboolfalse是否允许快捷折叠面板Resizablebooltrue是否允许拖拽调整任一面板禁用后整个拖拽被禁用其中Size与Min支持的长度单位语义由 UnitOfPaneSize.cs 中的Pixel/Percent枚举定义实际使用时以字符串形式书写如200px、30%。当两个面板都未显式设置Size时默认各占 50%示例中的两个面板即如此。面板注册机制每个SplitterPanel在OnInitialized时调用Splitter.AddPane(this)将自己注册进容器SplitterPanel.cs容器收集到两个面板后通过UpdatePaneStateSplitter.razor.cs将面板参数提升为自身渲染属性ShouldRender仅在两块面板齐全时才允许渲染Splitter.razor.cs这保证了分隔条与两块面板的 DOM 结构完整可用。六、垂直布局与其它演示能力的组合除垂直方向外同一目录下还有三个演示用例可与垂直布局自由组合尺寸控制size.md 展示通过Size40% Min20%初始化并限制面板尺寸。垂直布局下可写作SplitterPanel Size40% Min20%表示上方面板初始占容器高度 40%、最小 20%。可折叠collapsible.md 展示Collapsible快捷收缩能力并可用Min限制折叠后不能通过拖拽展开。在垂直布局中分隔条两侧会出现上/下箭头up/down图标对应 Splitter.razor 中按Layout选择的图标方向。受控模式control.md 展示通过OnResize回调与Size参数双向绑定实现受控尺寸任一面板设置Resizablefalse后整体拖拽即被禁用。垂直布局下同样适用这套受控流程。组合示例垂直 可折叠 尺寸限制Splitter LayoutSplitterLayout.Vertical Styleheight: 300px; SplitterPanel Collapsible Min20% p顶部面板/p /SplitterPanel SplitterPanel Collapsible p底部面板/p /SplitterPanel /Splitter七、注意事项与限制结合 index.zh-CN.md 的说明与当前源码目前仅支持两个面板组件内部_panes.Count 2才触发状态同步与渲染Splitter.razor.cs多面板支持属于后续规划勿在业务中直接放置三个及以上SplitterPanel。垂直布局务必给定容器高度与水平布局依赖容器宽度不同垂直布局的高度分配以容器height为基准示例中固定200px的做法可避免面板高度塌缩。Size与Min的单位支持px与%百分比相对容器尺寸计算注意与UnitOfPaneSize枚举语义对应。组件处于 Experimental 分类按文档目录分类Splitter 属于实验性组件API 可能在后续版本调整升级组件库版本时应关注变更记录。结语Splitter 的垂直布局看似只是LayoutSplitterLayout.Vertical一行配置背后却串联了 flex 布局方向、CSS 光标与分隔条样式、JS 拖拽坐标轴切换以及 .NET/JS 双向尺寸同步等完整链路。掌握 vertical.md 对应的 Vertical.razor 示例配合 Splitter.razor.cs、splitterHelper.ts 与 style/index.less 三处源码即可在 ant-design-blazor 项目中灵活实现各类上下分栏、可拖拽调高的界面布局。赞分享UI组件前端【免费下载链接】ant-design-blazorA rich set of enterprise-class UI components based on Ant Design and Blazor.项目地址https://gitcode.com/gh_mirrors/an/ant-design-blazor点击查看免费下载相关推荐ant-design-blazor Splitter 垂直布局实战从示例到源码原理ant design blazor Splitter 垂直布局实战从示例到源码原理 本指南聚焦 ant design blazor 组件库中 Splitter前端UI组件设计系统Ant Design Blazor Descriptions 垂直布局Vertical完整实战指南从用法到源码原理Ant Design Blazor Descriptions 垂直布局Vertical完整实战指南从用法到源码原理 Descriptions描述列表组前端UI组件设计系统Ant Design Blazor 栅格垂直对齐实践RowAlign 参数与 Flex 布局实现原理Ant Design Blazor 栅格垂直对齐实践RowAlign 参数与 Flex 布局实现原理 本篇技术文章围绕 ant design blazor 中前端UI组件设计系统上一篇SMUDebugTool终极指南免费开源AMD Ryzen处理器调试工具完全教程下一篇Clinical Evidence Agent 实战指南为医疗 AI 初创公司构建临床证据与可信度框架创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考