Tiles represent the content containers within the TileLayout component and allow for a wide variety of layouts based on the application requirements. In order to define the tile containers, add TileLayoutItem components by nesting
<kendo-tilelayout-item> tags inside
<kendo-tilelayout>. They will hold the arbitrary content of the tile.
Each tile consists of two main sections, which yield for a logically separated structure and are responsible for aligning the content passed to them. Those sections are:
body(Required) - Configured by nesting a
<kendo-tilelayout-item-body>element of type TileLayoutItemBody inside the tile. Any content passed to it will be rendered as the main content of the container.
header(Optional) - Configured either by passing a string to the title configuration option of the TileLayoutItem or by nesting a
<kendo-tilelayout-item-header>element of type TileLayoutItemHeader inside the tile. Both approaches will result in rendering a header section above the body.
The header section of the tiles is required if the reorderable option of the TileLayout component is enabled. End-users will be able to drag the tiles through their headers.
The example below demonstrates how to structure the contents of the TileLayout tiles.
Each tile occupies a predefined number of rows and columns. The default size is 1 row and 1 column. To configure the number of rows and columns the tile will occupy, set its rowSpan and colSpan options. Additionally the tile allows you to pin-point its initial position to a specific column and row.
All available configuration options of the tiles related to sizing and positioning are:
- rowSpan—Specifies the number of rows that tile will occupy.
- colSpan—Specifies the number of columns that tile will occupy.
- row—Specifies the initial row of the tile.
- col—Specifies the initial column of the tile.
- order—Specifies the index order of the tile. By default the tiles are ordered sequentially according to their position in the DOM.
For additional details and examples on how to configure the specific column and row size, refer to the Columns and Rows Dimensions article.
The following example demonstrates how to set various row and column spans for the tiles.