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.
- 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.
App.js
styles.css
- 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;
- }
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
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.