ItemMedia
Source: client/lib/theme/vueda-tailwind/shell/index.js
The leading media region for an item. The
iconvariant creates a 32px bordered tile, theimagevariant creates a 40px cropped image frame, and the default stays transparent.
Vue component: ItemMedia
| Slot | Default classes | Description |
|---|---|---|
| root | callback | 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. |
root
The leading media region for an item. The
iconvariant creates a 32px bordered tile, theimagevariant 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