• Introduction
  • Getting Started
  • Vue 2 End of Support
  • Native Components
    • Animation
    • Buttons
    • Chartsupdated
    • Conversational UInew
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gauges
    • Grid
    • Icons
    • Indicators
    • Inputs
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Notification
    • PDF Processing
    • Popup
    • Progress Bars
    • Scheduler
    • ScrollView
    • Tooltip
    • TreeList
    • TreeView
    • Upload
  • Wrapper Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • FAQ
  • Troubleshooting

Kendo UI for Vue Native TileLayout Overview

The Kendo UI for Vue Native TileLayout component is based on the two-dimensional CSS Grid and displays content in tiles. They can be resized and reordered as desired by the user.

The component features draggable and resizable items (tiles), static ones, various auto flows, fixed widths and heights, configurable number of columns, and many more.

The TileLayout Component is part of Kendo UI for Vue, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The following example demonstrates the TileLayout in action.

Example
View Source
Change Theme:

The example above showcases the TileLayout among other Kendo UI for Vue components, namely the Grid and Chart components. The types of Native Vuw Charts shown here are Line charts and a Donut chart, which is a variation of the Pie chart.

The TileLayout is part of the Kendo UI for Vue Native Layout component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the TileLayout and the rest of the components in the package, see the Getting Started with the Kendo UI for Vue Native Layout Package guide.

Key Features

  • Auto Flows—The TileLayout allows you to control how the auto-placement algorithm works.
  • Tiles settings—You can customize the behavior of the tiles in the TileLayout.
  • Globalization—The TileLayout has built-in globalization support.
  • Resizable tiles—End users can resize the tiles according to their needs.
  • Reorderable tiles—End users can drag and reorder tiles across the layout.

Support and Learning Resources

Additional Resources