Item
列表中的一项：标识、斜体标题及其下方的一行说明，末端是操作按钮。
安装
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/item示例
一名司机，以及两个链接
Mara K. Rush
Rail yards · 41 jobs this month
import { Badge } from "@/components/zero/badge";import { Button } from "@/components/zero/button";import { ChevronRightIcon, LockIcon } from "@/components/zero/icons";import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemSeparator, ItemTitle,} from "@/components/zero/item";export default function ItemDrivers() { return ( <div className="grid w-full max-w-md gap-4"> <Item variant="outline"> <ItemMedia variant="image"> {/* biome-ignore lint/performance/noImgElement: a small SVG sample, and the demo is copied into projects without next/image */} <img src="/samples/portrait-a.svg" alt="" /> </ItemMedia> <ItemContent> <ItemTitle> Mara K. <Badge>Rush</Badge> </ItemTitle> <ItemDescription>Rail yards · 41 jobs this month</ItemDescription> </ItemContent> <ItemActions> <Button size="sm" variant="secondary"> Assign </Button> </ItemActions> </Item> <ItemGroup> <Item render={(props) => <a href="#locked" {...props} />}> <ItemMedia variant="icon"> <LockIcon /> </ItemMedia> <ItemContent> <ItemTitle>Locked jobs</ItemTitle> <ItemDescription>Open once you reach rank 3.</ItemDescription> </ItemContent> <ChevronRightIcon className="text-zero-text-3" /> </Item> <ItemSeparator /> <Item render={(props) => <a href="#history" {...props} />}> <ItemContent> <ItemTitle>History</ItemTitle> <ItemDescription>Every job you handed in.</ItemDescription> </ItemContent> <ChevronRightIcon className="text-zero-text-3" /> </Item> </ItemGroup> </div> );}行为
有三种样式：无装饰、淡色细线描边、浮起色底。作为链接使用（render）时，悬停变为浮起色，聚焦时显示焦点框。ItemMedia 可放置小号斜切凹槽中的图标，或带墨黑边框的图片。
ItemGroup 将多个项纵向堆叠，ItemSeparator 用于分隔各项。
属性
Item
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| rarity | "common" | "uncommon" | "rare" | "epic" | "legendary" | — | 按稀有度档位着色（见 Rarity）。 |
| variant | "default" | "outline" | "muted" | "default" | 无装饰、描边，或浮起色底。 |
| size | "default" | "sm" | "default" | 内边距大小。 |
| render | ReactElement | function | — | 渲染为指定元素，例如链接。 |
ItemMedia
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| variant | "default" | "icon" | "image" | "default" | 单独的图标、斜切凹槽中的图标，或带边框的图片。 |