Item 组件是一个简单的 flex 容器，几乎可以容纳任何类型的内容。使用它来显示标题、描述和操作。将其与 ItemGroup 组件组合使用，可以创建条目列表。
其实你几乎可以通过 div 元素和一些类名达到同样的效果，但我已经多次编写过此类结构，因此决定将其封装为一个组件。现在我经常使用它。
带有标题和描述的简单条目。
安装
使用方法
<script setup lang="ts">
import {
Item,
ItemContent,
ItemDescription,
ItemFooter,
ItemHeader,
ItemMedia,
ItemTitle,
} from '@/components/ui/item'
</script>
<template>
<Item>
<ItemHeader>Item Header</ItemHeader>
<ItemMedia />
<ItemContent>
<ItemTitle>Item</ItemTitle>
<ItemDescription>Item</ItemDescription>
</ItemContent>
<ItemFooter>Item Footer</ItemFooter>
</Item>
</template>示例
变体
带有微妙背景和边框的标准样式。
带有清晰边框且背景透明的轮廓样式。
柔和的外观，使用静默色彩显示次要内容。
尺寸
Item 组件针对不同的使用场景提供了不同的大小。例如，你可以使用 sm 大小来显示紧凑型条目，或使用 default 大小来显示标准条目。
带有标题和描述的简单条目。
图标
检测到来自未知设备的新登录。
头像
5个月前在线
邀请您的团队成员共同参与该项目。
图像
组
shadcn@vercel.com
maxleiter@vercel.com
evilrabbit@vercel.com
头部
链接 (Link)
要将条目渲染为链接，请使用 as-child 属性。悬停和聚焦状态将应用于锚点元素。
下拉菜单
API 参考
Item (条目)
用于显示包含媒体、标题、描述和操作的内容的主组件。
<template>
<Item size="" variant="">
<ItemMedia />
<ItemContent>
<ItemTitle>Item</ItemTitle>
<ItemDescription>Item</ItemDescription>
</ItemContent>
<ItemActions />
</Item>
</template>你可以使用 as-child 属性将自定义组件（例如链接）渲染为条目。悬停和聚焦状态将应用于该自定义组件。
<script setup lang="ts">
import {
Item,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle,
} from '@/components/ui/item'
</script>
<template>
<Item as-child>
<a href="/dashboard">
<ItemMedia variant="icon">
<Home />
</ItemMedia>
<ItemContent>
<ItemTitle>Dashboard</ItemTitle>
<ItemDescription>
Overview of your account and activity.
</ItemDescription>
</ItemContent>
</a>
</Item>
</template>ItemGroup
ItemGroup 组件是一个容器，用于将相关条目分组在一起并保持样式一致。
<template>
<ItemGroup>
<Item />
<Item />
</ItemGroup>
</template>ItemSeparator
ItemSeparator 组件是一个分隔符，用于分隔条目组中的条目。
<template>
<ItemGroup>
<Item />
<ItemSeparator />
<Item />
</ItemGroup>
</template>ItemMedia
使用 ItemMedia 组件来显示媒体内容，例如图标、图像或头像。
<template>
<ItemMedia variant="icon">
<Icon />
</ItemMedia>
</template><template>
<ItemMedia variant="image">
<img src="..." alt="...">
</ItemMedia>
</template>ItemContent
ItemContent 组件包裹了条目的标题和描述。
如果你只需要标题，可以跳过 ItemContent。
<template>
<ItemContent>
<ItemTitle>Item</ItemTitle>
<ItemDescription>Item</ItemDescription>
</ItemContent>
</template>ItemTitle
使用 ItemTitle 组件来显示条目的标题。
<template>
<ItemTitle>Item Title</ItemTitle>
</template>ItemDescription
使用 ItemDescription 组件来显示条目的描述。
<template>
<ItemDescription>Item description</ItemDescription>
</template>ItemActions
使用 ItemActions 组件来显示操作按钮或其他交互元素。
<template>
<ItemActions>
<Button>Action</Button>
<Button>Action</Button>
</ItemActions>
</template>ItemHeader
使用 ItemHeader 组件在条目中显示头部内容。
<template>
<ItemHeader>Item Header</ItemHeader>
</template>ItemFooter
使用 ItemFooter 组件在条目中显示底部内容。
<template>
<ItemFooter>Item Footer</ItemFooter>
</template>