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

  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { TileView } from 'devextreme-react/tile-view';
  •  
  • const tileViewData = [
  • { text: 'Maine', capital: 'Augusta' },
  • { text: 'Maryland', capital: 'Annapolis' },
  • { text: 'Massachusetts', capital: 'Boston', height: 2, widthRatio: 2 }
  • // ...
  • ];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <TileView
  • dataSource={tileViewData}
  • baseItemHeight={130}
  • baseItemWidth={180}
  • />
  • );
  • }
  • }
  •  
  • export default App;
See Also