分束器概述

分裂者是Telerik UI for ASP。网络核心，一个具有 110+ 组件的专业级UI库，用于构建现代和功能丰富的 应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

Telerik UI Splitter TagHelper和HtmlHelper。网络核心are server-side wrappers for the Kendo UI Splitter widget.

分配器提供了可调整大小和可折叠窗格的动态布局。它通过根据配置添加resize和collapse句柄，将HTML元素的子元素转换为交互式布局。拆分器的垂直和水平方向可以组合起来构建复杂的布局。

• Splitter HtmlHelper的演示页面

• Splitter TagHelper的演示页面

初始化Splitter

下面的示例演示如何定义Splitter。

@(Html.Kendo().Splitter() .Name("splitter") .Orientation(SplitterOrientation.Vertical) .Panes(verticalPanes => {verticalPanes. add () .Content(Html.Kendo().Splitter() .Name("horizontal") .Panes(horizontalPanes => {horizontalPanes. add () .HtmlAttributes(new {id =" left-pane"}) .Size("220px") .Content(@
 
 
);horizontalpane . add () .HtmlAttributes(new {id =" center-pane"}) .Content(@
 
内部分割器/中心窗格
 
);horizontalpane . add () .HtmlAttributes(new {id =" right-pane"}) .可折叠(true) .Size("220px") .Content(@
 
内分割器/右窗格
 
);}) .ToHtmlString ());verticalpane . add () .Size("100px") .可折叠(false) .Content(@
 
外分割器/中间窗格
 
);verticalpane . add () .Size("100px") .Content(@
 
外部分割器/底部窗格
 
);}))

    
 
 
   
 
   
Inner -splitter> 
    
外拆器/中间窗格
 
   
 
外拆器/底部窗格
 
  

public类SplitterController: Controller {public IActionResult Index() {return View();}}

基本配置

下面的示例演示Splitter的基本配置。

@(Html.Kendo().Splitter() .Name("splitter") .HtmlAttributes(new {style = "height: 400px;"}) .Orientation(SplitterOrientation.Vertical) .Events(events => events .Collapse("collapse") .Resize("resize") .Expand("expand") .ContentLoad("contentLoad")) .Panes(panes => {pane . add () .HtmlAttributes(new {id = "top_pane"}) .Size("100px") .可折叠(true) .可滚动(false) .Content(@
顶部窗格
);pane . add () .HtmlAttributes(new {id =" middle_pane"}) .Content(@
 
中间窗格
 
);pane . add () .HtmlAttributes(new {id = "bottom_pane"}) .可折叠(true) .可滚动(true) .Size("20%") .Content(@
底部窗格
);}))