Tiles Configuration
Tiles represent the content containers within the TileLayout component and allow for a wide variety of layouts based on the application requirements.
Defining the Tiles
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 typeTileLayoutItemBodyinside the tile. Any content you pass to it will be rendered as the main content of the container.header(Optional)—Configured either by passing a string to thetitleconfiguration option of theTileLayoutItemor 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
reorderableoption of the TileLayout component is enabled. End-users will be able to drag the tiles through their headers.
The following example demonstrates how to structure the contents of the TileLayout tiles.
Size and Position
Each tile occupies a predefined number of rows and columns. The default size is one row and one 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 related to sizing and positioning the tiles are:
rowSpan—Specifies the number of rows the tile will occupy.colSpan—Specifies the number of columns the 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 sizes, refer to the article about the dimensions of TileLayout columns and rows.
The following example demonstrates how to set various row and column spans for the tiles.
