109k
新建

项目 (Item)

上一页下一页

一个多功能的组件，用于显示包含媒体、标题、描述和操作的内容。

Radix UIBase UI
Radix UI - shadcn/ui 组件库
基础项目

一个包含标题和描述的简单项目。

您的个人资料已通过验证。
import { Button } from "@/components/ui/button"
import {
  Item,

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 与 Field 对比

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

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

变体

使用 variant 属性来改变条目的视觉样式。

默认变体

透明背景，无边框。

描边变体

带有可见边框的描边样式。

静音变体

用于次要内容的静音背景色。

import {
  Item,
  ItemContent,

尺寸 (Size)

使用 size 属性来改变条目的大小。可选尺寸为 default、sm 和 xs。

默认尺寸

适用于大多数用例的标准尺寸。

小号尺寸

适用于密集布局的紧凑尺寸。

超小尺寸

可用的最紧凑尺寸。

import {
  Item,
  ItemContent,

示例

图标

将 ItemMedia 与 variant="icon" 一起使用以显示图标。

安全警报

检测到来自未知设备的新登录。

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

头像

您可以使用带有 variant="avatar" 的 ItemMedia 来显示头像。

ER
Evil Rabbit

最后在线于 5 个月前

...
暂无团队成员

邀请您的团队成员共同协作此项目。

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {

图片

将 ItemMedia 与 variant="image" 一起使用以显示图片。

...
import Image from "next/image"
import {
  Item,

分组

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

s
shadcn

shadcn@vercel.com

m
maxleiter

maxleiter@vercel.com

e
evilrabbit

evilrabbit@vercel.com

import * as React from "react"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"

标题

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

v0-1.5-sm
v0-1.5-sm

日常任务与 UI 生成。

v0-1.5-lg
v0-1.5-lg

高级思维或推理。

v0-2.0-mini
v0-2.0-mini

面向大众的开源模型。

import Image from "next/image"
import {
  Item,

链接

使用 asChild 属性将条目渲染为链接。悬停和焦点状态将应用于该锚点元素。

...
import {
  Item,
  ItemActions,
<Item asChild>
  <a href="/dashboard">
    <ItemMedia variant="icon">
      <HomeIcon />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Dashboard</ItemTitle>
      <ItemDescription>Overview of your account and activity.</ItemDescription>
    </ItemContent>
  </a>
</Item>

下拉菜单

"use client"

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

RTL (从右至左)

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

基本元素

包含标题和描述的简单元素。

您的个人资料已验证。
"use client"

import * as React from "react"

API 参考

项目 (Item)

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

属性类型默认
variant (变体)"default" | "outline" | "muted""default"
size (尺寸)"default" | "sm" | "xs""default"
asChild (作为子元素)布尔值false

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>Title</ItemTitle>
  <ItemDescription>Description</ItemDescription>
</ItemContent>

ItemTitle

显示条目的标题。

<ItemTitle>Item Title</ItemTitle>

ItemDescription

显示条目的描述。

<ItemDescription>Item description</ItemDescription>

ItemActions

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

<ItemActions>
  <Button>Action</Button>
</ItemActions>

ItemHeader

在条目内容上方显示头部内容。

<Item>
  <ItemHeader>Header</ItemHeader>
  <ItemContent>...</ItemContent>
</Item>

ItemFooter

在条目内容下方显示底部内容。

<Item>
  <ItemContent>...</ItemContent>
  <ItemFooter>Footer</ItemFooter>
</Item>