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 }) => {
// Default and outline items share the transparent base border.
const variantClass = 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