Flux

Appearance

Gallery ​

The Gallery component is used to display multiple media entities in a grid. It also allows the user to upload new media to it and control them further.

Required icons

plus

Props

items?: (string | (FluxFocalPointObject & { readonly url: string; }))[]
The URLs of images to display.

pending-items?: string[]
The URLs of images that are pending.

is-editable?: boolean
If the gallery is allowed to be edited. This also includes uploading new images.

Emits

delete: [number]
Triggered when an item within the gallery is deleted.

upload: [File[]]
Triggered when new images have been uploaded.

Slots

default
Allows custom gallery items to be placed without items and pending-items.

Examples ​

Basic

A basic gallery.

<template>
    <FluxPane :style="{ width: '50%' }">
        <FluxPaneBody>
            <FluxGallery
                :items="items"/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxGallery, FluxPane, FluxPaneBody } from '@flux-ui/components';

    const items = [
        "/assets/demo/image-1.jpg",
        "/assets/demo/image-2.jpg",
        "/assets/demo/image-3.jpg",
        "/assets/demo/image-4.jpg",
        "/assets/demo/image-5.jpg"
    ];
</script>

Pending

A gallery with pending items

<template>
    <FluxPane :style="{ width: '50%' }">
        <FluxPaneBody>
            <FluxGallery
                :items="items"
                :pending-items="pendingItems"/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxGallery, FluxPane, FluxPaneBody } from '@flux-ui/components';

    const items = [
        "/assets/demo/image-1.jpg",
        "/assets/demo/image-2.jpg",
        "/assets/demo/image-3.jpg",
        "/assets/demo/image-4.jpg"
    ];

    const pendingItems = [
        "/assets/demo/image-5.jpg",
    ];
</script>

Edit

A gallery that can be edited.

<template>
    <FluxPane :style="{ width: '50%' }">
        <FluxPaneBody>
            <FluxGallery
                is-editable
                :items="items"
                @upload="uploaded"
                @delete="deleted"/>
        </FluxPaneBody>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxGallery, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { ref } from 'vue';

    const items = ref([
        "/assets/demo/image-1.jpg",
        "/assets/demo/image-2.jpg",
        "/assets/demo/image-3.jpg",
        "/assets/demo/image-4.jpg",
        "/assets/demo/image-5.jpg"
    ]);

    function uploaded(files: File[]): void {
        files.forEach(file => items.value = [...items.value, URL.createObjectURL(file)]);
    }

    function deleted(index: number): void {
        items.value = items.value.filter((_, i) => i !== index);
    }
</script>

Used components ​