TileLayoutComponent
Represents the Kendo UI TileLayout component for Angular
Definition
Package:@progress/kendo-angular-layout
Selector:kendo-tilelayout
Syntax:
<kendo-tilelayout [columns]="3" [gap]="10">
<kendo-tilelayout-item>Content 1</kendo-tilelayout-item>
<kendo-tilelayout-item>Content 2</kendo-tilelayout-item>
</kendo-tilelayout>Inputs
Controls how the auto-placement algorithm works, specifying exactly how auto-placed items are flowed in the TileLayout (see example).
For further reference, check the grid-auto-flow CSS article.
'column'
columns
number
Specifies the number of columns (see example).
1
columnWidth
string | number
Sets the width of the columns. Use numeric values for pixels or string values for other CSS units (see example).
'1fr'
gap
number | TileLayoutGap
Sets the spacing between layout items in pixels.
Use an object with rows and columns properties to set different horizontal and vertical spacing.
Use a single number to apply the same spacing to both directions.
{ rows: 16, columns: 16 }
navigable
boolean
Enables or disables keyboard navigation.
true
reorderable
boolean
Enables or disables item reordering (see example).
false
resizable
boolean
Enables or disables item resizing (see example).
false
rowHeight
string | number
Sets the height of the rows. Use numeric values for pixels or string values for other CSS units (see example).
'1fr'
Fields
Contains a query list of the TileLayoutItemComponent instances that are used in the TileLayout.
This allows you to access the items programmatically and manipulate their properties or listen to their events.
Events
Fires when item reordering is completed (see example). You can prevent this event to cancel the reorder operation.
Fires when item resizing is completed (see example). You can prevent this event to cancel the resize operation.