jQuery 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.
jQuery
JavaScript
$(function() {
const tileViewData = [
{ text: "Maine", capital: "Augusta" },
{ text: "Maryland", capital: "Annapolis" },
{ text: "Massachusetts", capital: "Boston", height: 2, widthRatio: 2 }
// ...
];
$("#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
],
// ...
})Vue
<template>
<DxTileView
:data-source="tileViewData"
:base-item-height="130"
:base-item-width="180"
/>
</template>
<script>
import 'devextreme/dist/css/dx.common.css';
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>React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
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
Feedback