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