The Item component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the ItemGroup component to create a list of items.

你可以几乎用 div 元素与一些类来实现同样的效果，但我已经这么做过很多次，决定把它封装成一个组件。现在我经常会用到它。

Basic Item

A simple item with title and description.

Your profile has been verified.

安装

pnpm dlx shadcn-vue@latest add item

用法

<script setup lang="ts">
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemFooter,
  ItemHeader,
  ItemMedia,
  ItemTitle,
} from '@/components/ui/item'
</script>

<template>
  <Item>
    <ItemHeader>条目标题</ItemHeader>
    <ItemMedia />
    <ItemContent>
      <ItemTitle>条目</ItemTitle>
      <ItemDescription>条目</ItemDescription>
    </ItemContent>
    <ItemFooter>条目底部</ItemFooter>
  </Item>
</template>

Item 与 Field

如果你需要显示表单输入（如复选框、输入框、单选框或下拉框），请使用 Field。

若只需要显示标题、描述和操作，请使用 Item。

示例

变体

Default Variant

Standard styling with subtle background and borders.

Outline Variant

Outlined style with clear borders and transparent background.

Muted Variant

Subdued appearance with muted colors for secondary content.

大小

Item 组件有不同的尺寸，适用于不同场景。例如，你可以用 sm 进行紧凑条目，或用 default 作为标准条目。

Basic Item

A simple item with title and description.

Your profile has been verified.

图标

Security Alert

New login detected from unknown device.

头像

ER

Evil Rabbit

Last seen 5 months ago

CNLRER

No Team Members

Invite your team to collaborate on this project.

图片

Midnight City Lights - Electric Nights

Neon Dreams

3:45

Coffee Shop Conversations - Urban Stories

The Morning Brew

4:05

Digital Rain - Binary Beats

Cyber Symphony

3:30

Group

s

shadcn

shadcn@vercel.com

m

maxleiter

maxleiter@vercel.com

e

evilrabbit

evilrabbit@vercel.com

Header

v0-1.5-sm

Everyday tasks and UI generation.

v0-1.5-lg

Advanced thinking or reasoning.

v0-2.0-mini

Open Source model for everyone.

链接

要将条目渲染为链接，使用 as-child 属性。悬停和聚焦状态会应用于锚点元素。

Visit our documentation

Learn how to get started with our components.

External resource

Opens in a new tab with security attributes.

下拉

API 参考

Item

显示内容与媒体、标题、描述和操作的主要组件。

Prop	Type	Default
variant	"default" | "outline" | "muted"	"default"
size	"default" | "sm"	"default"
as-child	boolean	false

<template>
  <Item size="" variant="">
    <ItemMedia />
    <ItemContent>
      <ItemTitle>条目</ItemTitle>
      <ItemDescription>条目</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>
          您的账户和活动概览。
        </ItemDescription>
      </ItemContent>
    </a>
  </Item>
</template>

ItemGroup

ItemGroup 组件是一个容器，用于将相关的条目组合在一起并保持一致的样式。

Prop	Type	Default
class	string

<template>
  <ItemGroup>
    <Item />
    <Item />
  </ItemGroup>
</template>

ItemSeparator

ItemSeparator 组件是一个分隔符，用来在条目组中分隔条目。

Prop	Type	Default
class	string

<template>
  <ItemGroup>
    <Item />
    <ItemSeparator />
    <Item />
  </ItemGroup>
</template>

ItemMedia

使用 ItemMedia 组件来显示媒体内容，例如图标、图片或头像。

Prop	Type	Default
variant	"default" | "icon" | "image"	"default"
class	string

<template>
  <ItemMedia variant="icon">
    <Icon />
  </ItemMedia>
</template>

<template>
  <ItemMedia variant="image">
    <img src="..." alt="...">
  </ItemMedia>
</template>

ItemContent

ItemContent 组件包裹条目的标题和描述。

如果你只需要标题，可以跳过 ItemContent。

Prop	Type	Default
class	string

<template>
  <ItemContent>
    <ItemTitle>条目</ItemTitle>
    <ItemDescription>条目</ItemDescription>
  </ItemContent>
</template>

ItemTitle

使用 ItemTitle 组件来显示条目的标题。

Prop	Type	Default
class	string

<template>
  <ItemTitle>条目标题</ItemTitle>
</template>

ItemDescription

使用 ItemDescription 组件来显示条目的描述。

Prop	Type	Default
class	string

<template>
  <ItemDescription>条目描述</ItemDescription>
</template>

ItemActions

使用 ItemActions 组件来显示操作按钮或其他交互元素。

Prop	Type	Default
class	string

<template>
  <ItemActions>
    <Button>操作</Button>
    <Button>操作</Button>
  </ItemActions>
</template>

ItemHeader

使用 ItemHeader 组件在条目中显示标题。

Prop	Type	Default
class	string

<template>
  <ItemHeader>条目标题</ItemHeader>
</template>

ItemFooter

使用 ItemFooter 组件在条目中显示脚注。

Prop	Type	Default
class	string

<template>
  <ItemFooter>条目底部</ItemFooter>
</template>