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
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.