TileLayout外观
本文描述TileLayout如何构造布局,以及影响其外观的参数是什么。要更深入地理解组件行为,请熟悉的概念CSS网格布局第一。TileLayout组件基于它作为底层实现和核心属性。
TileLayout组件在两个层次上公开了控制布局的参数:
主要元素
main元素定义的个数列
,宽度
而且高度
的布局,以及ColumnWidth
而且RowHeight
.
的ColumnWidth
而且RowHeight
为主布局的每个列和行定义最大尺寸。随着整体组件尺寸的变化(例如,由于不同的视口),列和行高度可能会降低,以提供均匀的分布。单个瓦可以跨多个列或行。
通常,您应该使用允许所需的列和行数量(取决于它们的宽度和高度)的设置来适应整个组件的设置宽度和高度。
但是,您不必设置宽度
而且高度
-主要措施是列
它将足以创建一个布局。
因为Tile Layout是一个块元素,它的宽度默认为汽车
在浏览器中,与实际宽度之间均匀分布的数列
.设置身高=“100%”
也可以让组件占用其父维度的高度。
如果宽度和高度维度不足以容纳当前磁贴创建的定义的行高和列宽,则实际行高和/或列宽将减小,以便指定的列数适合可用宽度,而现有的行数适合可用高度。
列
,宽度
而且高度
没有默认值。
ColumnWidth
而且RowHeight
默认为1 fr
.因此,您可能希望省略设置ColumnWidth
为了获得更灵敏的(流体)布局-所有列将有相同的宽度-总宽度的一部分。
如果为主元素设置显式尺寸,还应该考虑另外两个设置列空间
而且行空间
-它们是CSS单元,定义了各个列和行之间的间隙,并计入组件的总维度。他们默认16 px
.
最后,您还可以设置类
参数,呈现在瓷砖布局的主要包装元素,以便您可以级联自定义CSS规则通过它。
个别瓷砖
每个磁贴都提供了定义其占用多少列和行的设置ColSpan
而且行宽
参数。它还提供了类
参数,所以你可以级联CSS规则通过它。
ColSpan
能影响实际数量吗列
整个布局。例如,如果你有一个瓷砖ColSpan = " 2 "
而且列= " 1 "
, TileLayout仍然有两列。
调整大小和重新排序瓷砖使它们与主元素的行和列的尺寸相匹配,它们的大小决定了它们如何呈现——它们在第一个容纳当前大小的可用插槽中呈现,然后在下一个可用插槽中呈现下一个瓷砖。这意味着大的瓦片会留下小的缝隙,即使瓦片足够小,可以填补这些缝隙,也不可能将大瓦片拖进没有空间的缝隙中。一个平铺是否会在另一个平铺之前移动取决于鼠标光标相对于静态平铺的位置,而不是由拖动平铺的整体尺寸和位置决定——如果鼠标光标位于垂直中间的左侧,则拖动平铺将在静态平铺之前移动,如果鼠标光标位于垂直中间的右侧,则拖动平铺将在静态平铺之后移动。
下一个步骤
- 了解如何设置平铺内容.
- 使瓷砖调整而且重新排序.
- 处理Tile布局事件.
- 管理Tile Layout状态.