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