This article describes how the TileLayout constructs its layout, and what are the parameters that affect its appearance. To understand the component behavior in more depth, get familiar with the concept of CSS Grid Layout first. The TileLayout component is based on it as underlying implementation and core properties.
The TileLayout component exposes parameters that control its layout at two levels:
The main element defines the number of
Height of the layout, as well as the
RowHeight define the maximum dimensions for each column and row of the main layout. As the overall component dimensions change (e.g., because of different viewports), the column and row heights might decrease to provide even distribution. A single tile can span more than one column or row.
Generally, you should use settings that allow the desired number of columns and rows (depending on their width and height) to fit in the set width and height of the entire component.
You do not, however, have to set
Height - the main measure is the
Columns and it will suffice to create a layout.
Since the Tile Layout is a block element, its width defaults to
auto in the browser, and the actual width is distributed evenly between the number of
Height="100%" can let the component take up its parent dimensions in terms of height as well.
If the width and height dimensions are insufficient to accommodate the defined row height and column width that the current tiles create, the actual row height and/or column width will decrease so that the appointed number of columns fit in the available width and the existing number of rows fit in the available height.
Height have no default values.
RowHeight default to
1fr. Thus, you may want to omit setting a
ColumnWidth in order to get a more responsive (fluid) layout - all columns will then have the same width - a fraction of the total width.
There are two other settings you should take into account if you set explicit dimensions to the main element - the
RowSpacing - they are CSS units that define the gaps between the individual columns and rows and count towards the total dimensions of the component. They default to
Lastly, you can also set the
Class parameter that renders at the main wrapping element of the tile layout so you can cascade custom CSS rules through it.
Each tile provides settings that define how many columns and rows its takes up - the
RowSpan parameters. It also provides a
Class parameter so you can cascade CSS rules through it.
ColSpan can affect the actual number of
Columns of the entire layout. For example, if you have a tile with
Columns="1", the TileLayout will still have two columns.
Resizing and reordering tiles makes them snap to the dimensions of the rows and columns of the main element, and their size determines how they render - they are rendered in the first available slot that accommodates their current size, and then the next tile is rendered in the next available slot. This means that large tiles can leave small gaps that will not be filled in by tiles that do not come immediately after them, even if they are sufficiently small to fit in those gaps, and that dragging a large tile into a slot where there is no room might not be possible. Whether a tile will move before another tile is determined by the mouse cursor position relative to the static tile, not by the overall dimensions and position of the dragged tile - if the mouse cursor is to the left of the vertical middle, the dragged tile will go before the static tile and if the mouse cursor is on the right of the vertical middle, the dragged tile will go after the static tile.
- Find how to set tile content.
- Enable tile resizing and reordering.
- Handle Tile Layout events.
- Manage the Tile Layout state.