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