Skip to content

ItemMedia

Source: client/lib/theme/vueda-tailwind/shell/index.js

The leading media region for an item. The icon variant creates a 32px bordered tile, the image variant creates a 40px cropped image frame, and the default stays transparent.

Vue component: ItemMedia

SlotDefault classesDescription
rootcallbackThe leading media region for an item. The icon variant creates a 32px bordered tile, the image variant creates a 40px cropped image frame, and the default stays transparent.

root

The leading media region for an item. The icon variant creates a 32px bordered tile, the image variant creates a 40px cropped image frame, and the default stays transparent.

Callback:

javascript
({ variant }) => {
            const variantClass =
                variant === "icon"
                    ? "size-8 hairline hairline-border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4"
                    : variant === "image"
                      ? "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover"
                      : "bg-transparent";
            return {
                class: [
                    // Layout and description alignment.
                    "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start",

                    // Icons and description offset.
                    "[&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",

                    variantClass,
                ],
            };
        }

Source: client/lib/theme/vueda-tailwind/shell/ItemMedia.theme.js:18

Documents matching: server v3.0.0a1.post1client v3.0.0-alpha.2