Vue 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.

  • <template>
  • <DxGallery
  • :data-source="dataSource"
  • :height="300"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxGallery } from 'devextreme-vue/gallery';
  •  
  • export default {
  • components: {
  • DxGallery
  • },
  • data() {
  • return {
  • dataSource: [{
  • imageSrc: 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png',
  • disabled: true
  • }, {
  • imageSrc: 'https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png',
  • imageAlt: 'Peter'
  • }]
  • };
  • }
  • }
  • </script>

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

  • <template>
  • <DxGallery
  • :data-source="dataSource"
  • :height="300"
  • item-template="item">
  • <template #item="{ data }">
  • <div>
  • <p><b>Name</b>: <span>{{data.name}}</span></p>
  • <img :src="data.path" :alt="data.name" />
  • </div>
  • </template>
  • </DxGallery>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DxGallery } from 'devextreme-vue/gallery';
  •  
  • export default {
  • components: {
  • DxGallery
  • },
  • data() {
  • return {
  • dataSource: [
  • { path: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person1.png", name: "Maria" },
  • { path: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person2.png", name: "John" },
  • { path: "https://js.devexpress.com/Content/images/doc/24_2/PhoneJS/person3.png", name: "Xavier" }
  • ]
  • };
  • }
  • }
  • </script>

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

See Also