Kendo UI for Vue
Vue TileLayout
- Often used for dashboards, the TileLayout component renders richly formatted items in tiles that can be moved and resized.
- Part of the Kendo UI for Vue library along with 100+ professionally-designed components.
- Includes support, documentation, demos, virtual classrooms, learning resources and more!
-
Arrange Content in Movable and Sizable Tiles
The Vue TileLayout component is great for organizing information into dashboard-like views. It displays and aligns a collection of tiles into columns and rows. The tiles can contain static information from other Kendo UI components and are highly customizable. The TileLayout also allows end-users to rearrange and resize any of the tiles while giving the developer full control over the flow of the component during these events.
-
Tile Reordering
You can choose to allow or prevent users from reordering tiles using drag-and-drop operations. If you choose to allow them to drag and reorder tiles, Kendo UI for Vue TileLayout component will automatically reorder the rest of the tiles with autoflow. Additionally, you can programmatically reorder tiles.
-
Tile Resizing
You can choose to allow or prevent users from resizing tiles. If you choose to allow them to resize tiles, Kendo UI for Vue TileLayout component will automatically reorder the rest of the tiles with autoflow. Additionally, you can programmatically resize tiles.
-
Configuration Options
The Vue TileLayout provides properties that make it convenient to format and configure various aspects of the component. These include:
- Number of columns
- Row heights
- Column widths
- Gaps between columns
- Autoflow
- Reordering
- Resizing
-
Auto Flow
The Vue TileLayout will automatically arrange items using an algorithm similar to the CSS grid-auto-flow property. It defaults to column, but you can change it to others such as row and dense.
Get Started with Kendo UI for Vue
