React Gallery - Customize Item Appearance
Gallery items are not sctrictly images. They can contain text or other elements of your choice. For a minor customization of Gallery items, you can define specific fields in item data objects. For example, the following code generates two items: one is disabled and the other has a specified alt attribute.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { Gallery } from 'devextreme-react/gallery';
- const dataSource = [{
- imageSrc: 'https://js.devexpress.com/Content/images/doc/24_1/PhoneJS/person1.png',
- disabled: true
- }, {
- imageSrc: 'https://js.devexpress.com/Content/images/doc/24_1/PhoneJS/person2.png',
- imageAlt: 'Peter'
- }];
- class App extends React.Component {
- render() {
- return (
- <Gallery
- dataSource={dataSource}
- height={300}
- />
- );
- }
- }
- export default App;
If you need a more flexible solution, define an itemTemplate.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import { Gallery } from 'devextreme-react/gallery';
- const dataSource = [
- { path: "https://js.devexpress.com/Content/images/doc/24_1/PhoneJS/person1.png", name: "Maria" },
- { path: "https://js.devexpress.com/Content/images/doc/24_1/PhoneJS/person2.png", name: "John" },
- { path: "https://js.devexpress.com/Content/images/doc/24_1/PhoneJS/person3.png", name: "Xavier" }
- ];
- const renderGalleryItem = (itemData) => {
- return (
- <div>
- <p><b>Name</b>: <span>{itemData.name}</span></p>
- <img src={itemData.path} alt={itemData.name} />
- </div>
- );
- }
- class App extends React.Component {
- render() {
- return (
- <Gallery
- dataSource={dataSource}
- height={300}
- itemRender={renderGalleryItem}
- />
- );
- }
- }
- 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.