ASP。. NET Core tile布局概述
TileLayout是面向ASP的Telerik UI。网络核心一个专业级的UI库，包含 110+ 组件，用于构建现代和功能丰富的 应用程序。要想尝试一下，注册一个30天的免费试用。
Telerik UI的TileLayout TagHelper和HtmlHelper的ASP。网络核心are server-side wrappers for the Kendo UI TileLayout widget.
TileLayout小部件允许您配置一个基于网格的二维沙箱表面，以显示可以四处拖动和重新排列的内容，以创建任何现代页面设计。
它是基于CSS网格它涵盖了大多数情况，并使用额外的JavaScript逻辑来提供调整大小、重新排序和模板定制。
初始化Tile布局
要初始化Tile Layout，请指定的数目列()，并使用行宽()和ColSpan ()的，以便在可用的网格空间中定位内容。
下面的例子将呈现一个有两列的网格，可以垂直和水平调整大小。
@(Html.Kendo(). tilelayout (). name ("tilelayout") . columns (2) . rowsheight ("285px") . columnswidth ("285px") . containers (c => {c. add ()Header(h => h. text ("Header One"))。BodyTemplate("Body Text One").ColSpan(1).RowSpan(1);c.Add()。Header(h => h. text ("Header Two"))。BodyTemplate("Body Text Two").ColSpan(1).RowSpan(1);c.Add()。Header(h => h. text ("Header Three"))。BodyTemplate("Body Text Three").ColSpan(2).RowSpan(1);}) .Reorderable(true) .Resizable(true)) < / kendo-tilelayout > 网格布局配置
面向ASP的Telerik UI布局。网络核心available grid space is defined by using the列()方法。显示磁贴的行数将自动调整。列和行的默认宽度为1 fr可以使用ColumnsWidth ()和RowsHeight ()方法。
的
RowsHeight ()和ColumnsWidth ()方法参数值设置小部件的行或列将拉伸到的最大高度/宽度。根据调整大小、内容和用户与布局的交互，它们可能小于设定值。
Tile布局配置
每个瓷砖可以跨越几行和几列。瓷砖占用的空间由其容器决定行宽()和ColSpan ()．有关容器及其可配置属性的更多信息，请参阅容器篇文章。
差距
属性来配置行和列之间的网格线差距。列对于瓷砖之间的垂直空间和差距。行对于水平间距。
.Gap (g = > g.Columns (10) .Rows (10)) < span rows="10" columns="10" /> 这些属性也被称为行/列之间的沟槽。
引用现有实例
获取对现有TileLayout实例的引用:
- 使用
jQuery.data ()方法。 一旦建立了引用，就使用TileLayout API控制它的行为。
var tilelayout = $("#tilelayout").data("kendoTileLayout");
功能和特性
已知的限制
目前，由于ie浏览器不支持沟槽，因此不支持该组件。