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