Skip to content

Item

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

The row-like item wrapper. It carries the default, outline, and muted variants, size spacing, anchor hover behavior, and focus treatment.

Vue component: Item

SlotDefault classesDescription
rootcallbackThe row-like item wrapper. It carries the default, outline, and muted variants, size spacing, anchor hover behavior, and focus treatment.

root

The row-like item wrapper. It carries the default, outline, and muted variants, size spacing, anchor hover behavior, and focus treatment.

Callback:

javascript
({ variant, size }) => {
            const variantClass =
                variant === "outline"
                    ? "border-border"
                    : variant === "muted"
                      ? "bg-muted/50 text-foreground"
                      : "bg-transparent";
            const sizeClass = size === "sm" ? "py-3 px-4 gap-2.5" : "p-4 gap-4";
            return {
                class: [
                    // Layout and base shape.
                    "group/item flex items-center border border-transparent text-sm rounded-md",

                    // Interactive states.
                    "transition-colors [a]:hover:bg-accent/50 [a]:active:bg-accent [a]:transition-colors duration-100",

                    // Wrapping and focus.
                    "flex-wrap focus-visible:focus-ring",

                    variantClass,
                    sizeClass,
                ],
            };
        }

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

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