React 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.
jQuery
$(function() { $("#tileViewContainer").dxTileView({ dataSource: [ { text: "Alabama", disabled: true }, { text: "Alaska" }, { text: "Arizona", visible: false } ] }); });
Angular
import { DxTileViewModule } from "devextreme-angular"; // ... export class AppComponent { tileViewData = [ { text: "Alabama", disabled: true }, { text: "Alaska" }, { text: "Arizona", visible: false } ]; } @NgModule({ imports: [ // ... DxTileViewModule ], // ... })
<dx-tile-view [dataSource]="tileViewData"> </dx-tile-view>
Vue
<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>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { TileView } from 'devextreme-react/tile-view'; const dataSource = [ { text: 'Alabama', disabled: true }, { text: 'Alaska' }, { text: 'Arizona', visible: false } ]; class App extends React.Component { render() { return ( <TileView dataSource={dataSource}/> ); } } export default App;
If you need a more flexible solution, define an itemTemplate.
jQuery
const tileViewData = [ { name: "Alabama", capital: "Montgomery" }, { name: "Alaska", capital: "Juneau" }, { name: "Arizona", capital: "Phoenix" }, // ... ]; $(function() { $("#tileViewContainer").dxTileView({ dataSource: tileViewData, itemTemplate: function (itemData, itemIndex, itemElement) { itemElement.addClass("tile"); itemElement.append( "<p style='font-size:larger'><b>" + itemData.name + "</b></p>", "<p>Capital: <i>" + itemData.capital + "</i></p>" ) } }); });
.tile { border-radius: .5em; text-align: center; color: white; background: gray; }
Angular
<dx-tile-view [dataSource]="tileViewData" [itemMargin]="15" [baseItemHeight]="80" [baseItemWidth]="140" itemTemplate="tile"> <div class="tile" *dxTemplate="let data of 'tile'"> <p style="font-size:larger"><b>{{data.name}}</b></p> <p>Capital: <i>{{data.capital}}</i></p> </div> </dx-tile-view>
import { DxTileViewModule } from "devextreme-angular"; // ... export class AppComponent { tileViewData = [ { name: "Alabama", capital: "Montgomery" }, { name: "Alaska", capital: "Juneau" }, { name: "Arizona", capital: "Phoenix" }, // ... ]; } @NgModule({ imports: [ // ... DxTileViewModule ], // ... })
.tile { border-radius: .5em; text-align: center; color: white; background: gray; }
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>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { TileView } from 'devextreme-react/tile-view'; const tileViewData = [ { name: "Alabama", capital: "Montgomery" }, { name: "Alaska", capital: "Juneau" }, { name: "Arizona", capital: "Phoenix" }, // ... ]; const renderTileItem = (itemData) => { return ( <div> <p style={{fontSize: "larger"}}>{itemData.name}</p> <p><i>{itemData.capital}</i></p> </div> ); } class App extends React.Component { render() { return ( <TileView items={tileViewData} itemRender={renderTileItem} /> ); } } export default App;
.tile { border-radius: .5em; text-align: center; color: white; background: gray; }
jQuery
You can also customize individual tiles. Declare them as scripts and reference them in the template property or assign a customization function straight to this property.
<div id="tileViewContainer"></div> <script id="individualTileTemplate" type="text/html"> <span>Comment</span> </script>
$(function() { $("#tileViewContainer").dxTileView({ dataSource: [{ name: "Alaska", capital: "Juneau", template: $("#individualTileTemplate") }] }); });
Angular
You can also customize individual tiles. Declare them using the dxItem component.
<dx-tile-view> <dxi-item> <span>User</span> </dxi-item> <dxi-item> <span>Comment</span> </dxi-item> </dx-tile-view>
import { DxTileViewModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxTileViewModule ], // ... })
Vue
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>
React
You can also customize individual tiles. Declare them using the dxItem component.
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { TileView, Item } from 'devextreme-react/tile-view'; class App extends React.Component { render() { return ( <TileView> <Item> <span>User</span> </Item> <Item> <span>Comment</span> </Item> </TileView> ); } } export default App;
Built-In Template Engine Demo 3rd-Party Template Engine Demo
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.