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
| Slot | Default classes | Description |
|---|---|---|
| root | callback | The 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