New to Kendo UI for Angular? Start a free 30-day trial

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 type TileLayoutItemBody inside 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 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 following example demonstrates how to structure the contents of the TileLayout tiles.

Example
View Source
Edit In Stackblitz  
Change Theme:

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:

  • rowSpanSpecifies the number of rows the tile will occupy.
  • colSpanSpecifies the number of columns the tile will occupy.
  • rowSpecifies the initial row of the tile.
  • colSpecifies the initial column of the tile.
  • orderSpecifies the index order of the tile. By , 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?