DevExtreme React - Specify the Size of Tiles
The size of all tiles in the widget is determined by the baseItemHeight and baseItemWidth options. If you need to set the size of a specific tile, use the heightRatio and widthRatio options 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.
jQuery
JavaScript
var tileViewData = [ { text: "Maine", capital: "Augusta" }, { text: "Maryland", capital: "Annapolis" }, { text: "Massachusetts", capital: "Boston", height: 2, widthRatio: 2 } // ... ]; $(function() { $("#tileViewContainer").dxTileView({ dataSource: tileViewData, baseItemHeight: 130, baseItemWidth: 180 }); });
Angular
HTML
TypeScript
<dx-tile-view [dataSource]="tileViewData" [baseItemHeight]="130" [baseItemWidth]="180"> </dx-tile-view>
import { DxTileViewModule } from "devextreme-angular"; // ... export class AppComponent { tileViewData = [ { text: "Maine", capital: "Augusta" }, { text: "Maryland", capital: "Annapolis" }, { text: "Massachusetts", capital: "Boston", height: 2, widthRatio: 2 } // ... ]; } @NgModule({ imports: [ // ... DxTileViewModule ], // ... })
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.