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 Kendo UI for Vue library together with other best-in-class native components for building fast and beautiful apps.
  • Comes with outstanding technical support, detailed documentation, and demos.
TileLayout
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • 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.

    See the Vue TileLayout Overview demo

  • 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.

    See the Vue Tile Reordering demo

  • 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.

    See the Vue Tile Resizing demo

  • 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

    The Vue TileLayout Configuration demo

  • 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.

    See the Vue TileLayout Auto Flows demo

kendo

Get Started with Kendo UI for Vue

Kendo UI