Vue TileView - Specify the Size of Tiles

The size of all tiles in the UI component is determined by the baseItemHeight and baseItemWidth properties. If you need to set the size of a specific tile, use the heightRatio and widthRatio properties of this tile. In this case, the size will be calculated according to the following formulas.

height = baseItemHeight * heightRatio
width = baseItemWidth * widthRatio

For example, the following code makes the "Massachusetts" tile twice bigger than the other tiles.

  • <template>
  • <DxTileView
  • :data-source="tileViewData"
  • :base-item-height="130"
  • :base-item-width="180"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxTileView } from 'devextreme-vue/tile-view';
  •  
  • export default {
  • components: {
  • DxTileView
  • },
  • data() {
  • return {
  • tileViewData: [
  • { text: 'Maine', capital: 'Augusta' },
  • { text: 'Maryland', capital: 'Annapolis' },
  • { text: 'Massachusetts', capital: 'Boston', height: 2, widthRatio: 2 }
  • // ...
  • ]
  • };
  • }
  • }
  • </script>
See Also