Flux

Appearance

Gallery Item ​

The gallery item represents a single image within the gallery. It displays the image in a consistent size and aspect ratio, ensuring a clean and uniform appearance across the grid. Gallery items are designed to showcase visual content clearly and maintain a cohesive layout within the gallery.

TIP

This component is best used within a Gallery.

Props

focal-point?: FluxFocalPointObject
The focal point of the image.

is-deletable?: boolean
If the gallery is allowed to be deleted.

is-pending?: boolean
If the gallery item is pending.

url: string
The url of the image.

Emits

delete: []
Triggered when the item is deleted.

Examples ​

Basic

A basic gallery item.

<template>
    <FluxPane :style="{ width: '25%' }">
        <FluxPaneBody>
            <FluxGalleryItem
                url="/assets/demo/image-1.jpg"/>
        </FluxPaneBody>
    </FluxPane>
</template>

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

Pending

A gallery item that is pending.

<template>
    <FluxPane :style="{ width: '25%' }">
        <FluxPaneBody>
            <FluxGalleryItem
                is-pending
                url="/assets/demo/image-1.jpg"/>
        </FluxPaneBody>
    </FluxPane>
</template>

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

Delete

A gallery item that can be deleted.

<template>
    <FluxPane :style="{ width: '25%' }">
        <FluxPaneBody>
            <FluxGalleryItem
                is-deletable
                url="/assets/demo/image-1.jpg"/>
        </FluxPaneBody>
    </FluxPane>
</template>

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

Used components ​