组件/TileLayout

Blazor TileLayout概述

的Blazor TileLayout组件是基于二维的吗CSS网格并在磁贴中显示其内容。用户可以拖动可重新排列而且拖动以调整大小瓷砖。磁贴可以跨越多行和多列。这允许您为您的用户构建可定制的仪表板，保存和恢复布局状态。

Telerik UI的Blazor忍者形象

的TileLayout组件Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

创建Blazor TileLayout

  1. 使用TelerikTileLayout标签。
  2. 设置所需的数量列为了布局。
  3. (可选)配置宽度，高度，ColumnWidth或RowHeight来定义所需的布局尺寸以及每个瓷砖的基本尺寸。
  4. (可选)设置可调整大小的而且Reorderable参数真正的允许用户更改布局。
  5. 添加< TileLayoutItem >实例。< TileLayoutItems >标签。设置HeaderText参数，并添加一个嵌套<内容>标记。瓷砖的内容。
  6. (可选)设置行宽而且ColSpan参数的值大于1来增加他们在网格中的大小。

基本瓷砖布局

   常规大小的第一个Tile。   你也可以把组件放在Tile中。   此Tile为三行高。   这个Tile是两行高两列宽

布局与外观

TileLayout是基于CSS网格的概念。基本上,组件布局依赖于具有预定义或自动尺寸的列和行。您可以设置行与列之间的行距。最后，磁贴还可以跨越多行和多列。

瓷砖的内容

每个瓦片(< TileLayoutItem >)在TileLayout中提供了一些配置选项控制它的标题和内容。

调整

用户可以调整单个贴图的大小为了更好的用户体验和内容可见性。

重新排序

用户还可以重新排列瓷砖，根据他们的喜好。

状态

的Tile Layout允许获取和设置其状态。TileLayout状态包含关于tile的顺序、列跨度和行跨度的信息。

事件

Tile布局触发用户调整磁贴大小或重新排列磁贴时的事件。这允许自定义逻辑执行、刷新嵌套组件和保存TileLayout状态以便以后恢复。

TileLayout参数

下表列出了Tile Layout参数。同时查看TileLayout API参考获取所有属性、方法和事件的完整列表。

参数 类型及默认值 描述
类 字符串 类的自定义CSS类< div class = " k-tilelayout”>元素。用它来覆盖主题样式。
列空间 字符串
（“16 px”）		 列与列之间的空白。
列 int 平铺布局中的列数。
ColumnWidth 字符串 一块瓷砖的宽度。如果不设置，贴图宽度将均匀分布。
高度 字符串 Tile Layout的高度。如果未设置，组件将自动展开以适应所有行。
RowHeight 字符串 一块瓷砖的高度。如果未设置，则基础贴图高度将由组件基于最高贴图设置。
行空间 字符串
（“16 px”）		 行与行之间的空白。
Reorderable 保龄球 启用瓷砖重新排序。
可调整大小的 保龄球 启用瓷砖大小调整。
宽度 字符串 瓷砖布局宽度。如果没有设置，组件将水平展开以填充它的父组件。

TileLayoutItem参数

参数 类型及默认值 描述
类 字符串 类的自定义CSS类< div class = " k-tilelayout-item”>元素。用它来覆盖主题样式。
ColSpan int
（1）		 一个瓦片将跨越多少列。
HeaderText 字符串 平铺标题为纯文本。对于富文本，使用嵌套< HeaderTemplate >标签。
Id 字符串 Tile id不会在HTML标记中呈现。组件在OnReorder而且OnResize事件参数。
行宽 int
（1）		 一个瓦片将跨越多少行。

TileLayout参考

使用组件引用执行方法和获取或设置TileLayout状态。

方法 描述
GetState 返回平铺布局的当前状态TileLayoutState对象。
设置状态 应用所提供的TileLayoutState参数作为Tile Layout的新状态。 
 获取TileLayout状态 @code{TelerikTileLayout TileLayoutRef {Get;设置;} async任务GetTileLayoutState() {var tileState = TileLayoutRef.GetState();}}

下一个步骤

另请参阅

在本文中
相关文章
找不到你需要的帮助? 改进这篇文章
Baidu
map