组件/分束器

Blazor Splitter概述

的Blazor分离器组件允许您将页面的一部分划分为用户可以调整大小和折叠的几个部分。这为应用程序和最终用户提供了房地产管理，这样他们就可以专注于当前任务中重要的内容。你也可以保存并加载它的状态，并回应事件。

《Blazor Ninja》图像的teleerik UI

Splitter组件是《Blazor》的teleerik UI，一个专业级的UI库，有100个本地组件，用于构建现代和功能丰富的应用程序。要想尝试一下，注册一个30天的免费试用。

免费下载试用版

为《Blazor》创建Splitter

  1. 声明< TelerikSplitter >标签

  2. 可选地设置宽度和高度参数设置为所需值。否则，组件大小将由内容和控件控制大小窗格的。

    • 您可以使用百分比形式的值(将它们设置为)100%(非常常见)，这样拆分器就会占用其容器的整个大小。看到维有关可以使用的单位以及以百分比表示的维度如何工作的更多详细信息。

  3. 在< SplitterPanes >子标签，添加所需的< SplitterPane >标记来创建内容的部分。

  4. 在每个< SplitterPane >，添加所需的内容-无论是HTML还是组件。

  5. 可选地，为单个窗格设置所需的设置-例如初始，最小和最大大小，用户是否可以折叠和调整窗格的大小。

拆分器，占用其容器的100%，并显示其窗格的主要功能

这个例子展示了拆分器如何填充整个容器(用红色边框标记)以及组件及其窗格的主要特性。< span style=" font - family:宋体;身高:300 px;边框:1px实红色;>    
left sidebar. Can be collapsed and can be resized between 50px and 150px.
   
right hand side pane - content. You cannot collapse this pane so it is always visible.
   
Third pane that is initially collapsed and is not resizable.

分配器功能的行动

拆分器功能概述

窗格

Тhe窗格是Splitter的构建块。每个窗格控制自己的行为，例如更改其大小和折叠的能力。阅读更多关于拆分窗格的信息…

大小

您可以通过其控件控制拆分器的大小宽度和高度参数。此外，该组件允许您指定每个窗格所需的大小。阅读有关拆分器大小的详细信息…

取向

拆分器窗格可以在水平或垂直方向上堆叠。阅读更多关于如何配置拆分器方向的信息…

状态

Splitter允许您保存其状态并以编程方式控制它。阅读更多关于分裂状态…

事件

Splitter生成事件，您可以处理这些事件来进一步定制组件行为并响应用户操作。阅读更多关于Blazor菜单事件…

分束器参数

Blazor Splitter为其配置提供了各种参数。下表列出了组件级别的Splitter参数。探索分束器窗格有关各个窗格配置的详细信息。

检查Splitter API参考获取属性、方法和事件的完整列表。

属性 类型和默认值 描述
类 字符串 在组件的主包装元素上呈现的CSS类。
高度 字符串 Splitter的高度。看到维有关可以使用的单位以及以百分比表示的维度如何工作的更多详细信息。
取向 SplitterOrientation枚举
（SplitterOrientation。水平）		 内容是水平还是垂直拆分(窗格如何堆叠)。
宽度 字符串 拆分器的宽度。看到维有关可以使用的单位以及以百分比表示的维度如何工作的更多详细信息。

拆分器引用和方法

添加对组件实例的引用以使用分束器的方法。

方法 描述
GetState 获取电流状态分裂者。
设置状态 设置当前状态分裂者。 
获取拆分器状态    
左侧栏
   
右侧窗格- content。
    @code {Telerik.Blazor.Components.TelerikSplitter SplitterRef {get;设置;}无效GetSplitterState() {var currState = SplitterRef.GetState();}}

下一个步骤

另请参阅

在本文中
相关文章
没有找到你需要的帮助?
联络支持
改进这篇文章
Baidu
map