Vue TileView - Customize Tile Appearance

For a minor customization of tiles, you can define specific fields in item data objects. For example, the following code generates three tiles: the first is disabled, the second is not customized, the third is hidden.

  • <template>
  • <DxTileView :data-source="dataSource"/>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxTileView } from 'devextreme-vue/tile-view';
  •  
  • export default {
  • components: {
  • DxTileView
  • },
  • data() {
  • return {
  • dataSource: [
  • { text: 'Alabama', disabled: true },
  • { text: 'Alaska' },
  • { text: 'Arizona', visible: false }
  • ]
  • };
  • }
  • }
  • </script>

If you need a more flexible solution, define an itemTemplate.

App.vue
  • <template>
  • <DxTileView
  • :data-source="tileViewData"
  • :item-margin="15"
  • :base-item-height="80"
  • :base-item-width="140"
  • item-template="tile">
  • <template #tile="{ data }">
  • <div>
  • <p style="font-size:larger"><b>{{data.name}}</b></p>
  • <p>Capital: <i>{{data.capital}}</i></p>
  • </div>
  • </template>
  • </DxTileView>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxTileView from "devextreme-vue/tile-view";
  •  
  • export default {
  • components: {
  • DxTileView
  • },
  • data() {
  • return {
  • tileViewData: [
  • { name: "Alabama", capital: "Montgomery" },
  • { name: "Alaska", capital: "Juneau" },
  • { name: "Arizona", capital: "Phoenix" },
  • // ...
  • ]
  • };
  • }
  • };
  • </script>
  •  
  • <style>
  • .tile {
  • border-radius: .5em;
  • text-align: center;
  • color: white;
  • background: gray;
  • }
  • </style>

You can also customize individual tiles. Declare them using the dxItem component.

  • <template>
  • <DxTileView>
  • <DxItem>
  • <template #default>
  • <span>User</span>
  • </template>
  • </DxItem>
  • <DxItem>
  • <template #default>
  • <span>Comment</span>
  • </template>
  • </DxItem>
  • </DxTileView>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxTileView, { DxItem } from "devextreme-vue/tile-view";
  •  
  • export default {
  • components: {
  • DxTileView,
  • DxItem
  • }
  • };
  • </script>

Built-In Template Engine Demo 3rd-Party Template Engine Demo

See Also