Gallery

Basic usage

<div>
    <button @click="showGallery">Show gallery</button>

    <mu-gallery 
        :opened="opened" 
        :images="images" 
        @update="opened = $event"
    />
</div>
1
2
3
4
5
6
7
8
9
export default {
    data(){
        return {
            opened: false,
            images: [
                {
                    srcLarge: 'https://i.pinimg.com/originals/77/9d/57/779d57efeca6ec306cb2f1dce9c2d332.png',
                },
                {
                    srcLarge: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/SMOM-d.svg/1024px-SMOM-d.svg.png',
                },
            ],
        }
    },
    methods: {
        showGallery() {
            this.opened = !this.opened;
        },
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Attributes

Attribute Description Type Accepted Values Default
opened Opened or closed flag Boolean true/false
images Images objects Array Array of objects with srcLarge and (or not) srcSmall property []