120k
New

项目

PreviousNext

一个用于展示媒体、标题、描述和操作的多功能组件。

Base UIReact AriaRadix UI
Basic Item

A simple item with title and description.

Your profile has been verified.
import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

Item 组件是一个简单的 flex 容器，几乎可以容纳任何类型的内容。使用它来显示标题、描述和操作。将它与 ItemGroup 组件组合使用，可以创建项目列表。

安装

pnpm dlx shadcn@latest add item

用法

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"
<Item>
  <ItemMedia variant="icon">
    <Icon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Title</ItemTitle>
    <ItemDescription>Description</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button>Action</Button>
  </ItemActions>
</Item>

组合

使用以下组合来构建一个 Item：

ItemGroup
└── Item
    ├── ItemHeader
    ├── ItemMedia
    ├── ItemContent
    │   ├── ItemTitle
    │   └── ItemDescription
    ├── ItemActions
    └── ItemFooter

Item 与 Field

如果需要显示复选框、输入框、单选框或选择框等表单输入控件，请使用 Field。

如果只需要显示标题、描述和操作等内容，请使用 Item。

变体

使用 variant 属性更改项目的视觉样式。

Default Variant

Transparent background with no border.

Outline Variant

Outlined style with a visible border.

Muted Variant

Muted background for secondary content.

import { InboxIcon } from "lucide-react"

import {

大小

使用 size 属性更改项目的大小。可用大小包括 default、sm 和 xs。

Default Size

The standard size for most use cases.

Small Size

A compact size for dense layouts.

Extra Small Size

The most compact size available.

import { InboxIcon } from "lucide-react"

import {

图标

使用 ItemMedia 和 variant="icon" 来显示图标。

Security Alert

New login detected from unknown device.

import { ShieldAlertIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

头像

你可以使用 ItemMedia 和 variant="avatar" 来显示头像。

ER
Evil Rabbit

Last seen 5 months ago

@evilrabbit
ER
No Team Members

Invite your team to collaborate on this project.

import { Plus } from "lucide-react"

import {

图片

使用 ItemMedia 和 variant="image" 来显示图片。

import Image from "next/image"

import {

分组

使用 ItemGroup 将相关项目组合在一起。

a
alex

alex@example.com

j
jamie

jamie@example.com

t
taylor

taylor@example.com

import * as React from "react"
import { PlusIcon } from "lucide-react"

标题

使用 ItemHeader 在项目内容上方添加标题。

v0-1.5-sm
v0-1.5-sm

Everyday tasks and UI generation.

v0-1.5-lg
v0-1.5-lg

Advanced thinking or reasoning.

v0-2.0-mini
v0-2.0-mini

Open Source model for everyone.

import Image from "next/image"

import {

链接

使用 render prop 将项目渲染为链接。悬停和聚焦状态将应用于锚点元素。

import { ChevronRightIcon, ExternalLinkIcon } from "lucide-react"

import {
<Item href="/dashboard">
  <ItemMedia variant="icon">
    <HomeIcon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>仪表板</ItemTitle>
    <ItemDescription>账户和活动概览。</ItemDescription>
  </ItemContent>
</Item>

下拉菜单

"use client"

import { ChevronDownIcon } from "lucide-react"

RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

عنصر أساسي

عنصر بسيط يحتوي على عنوان ووصف.

تم التحقق من ملفك الشخصي.
"use client"

import * as React from "react"

API 参考

Item

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

属性类型默认值
variant"default" | "outline" | "muted""default"
size"default" | "sm" | "xs""default"
renderReact.ReactElement

ItemGroup

用于将相关项目组合在一起并保持样式一致的容器。

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

ItemSeparator

组内项目之间的分隔符。

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

ItemMedia

使用 ItemMedia 显示图标、图像或头像等媒体内容。

属性类型默认值
variant"default" | "icon" | "image""default"
<ItemMedia variant="icon">
  <Icon />
</ItemMedia>
<ItemMedia variant="image">
  <img src="..." alt="..." />
</ItemMedia>

ItemContent

用于包裹项目的标题和描述。

<ItemContent>
  <ItemTitle>标题</ItemTitle>
  <ItemDescription>描述</ItemDescription>
</ItemContent>

ItemTitle

显示项目的标题。

<ItemTitle>项目标题</ItemTitle>

ItemDescription

显示项目的描述。

<ItemDescription>项目描述</ItemDescription>

ItemActions

用于放置操作按钮或其他交互元素的容器。

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

ItemHeader

在项目内容上方显示页眉。

<Item>
  <ItemHeader>页眉</ItemHeader>
  <ItemContent>...</ItemContent>
</Item>

ItemFooter

在项目内容下方显示页脚。

<Item>
  <ItemContent>...</ItemContent>
  <ItemFooter>页脚</ItemFooter>
</Item>