106k
New

项目

PreviousNext

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

Radix UIBase UI
Radix UI
Basic Item

A simple item with title and description.

Your profile has been verified.
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>标题</ItemTitle>
    <ItemDescription>描述</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button>操作</Button>
  </ItemActions>
</Item>

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 {
  Item,
  ItemContent,

大小

使用 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 {
  Item,
  ItemContent,

示例

图标

使用 ItemMedia 并设置 variant="icon" 来显示图标。

Security Alert

New login detected from unknown device.

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

头像

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

ER
Evil Rabbit

Last seen 5 months ago

ER
No Team Members

Invite your team to collaborate on this project.

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

图片

使用 ItemMedia 并设置 variant="image" 来显示图片。

分组

使用 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

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 {
  Item,

链接

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

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

下拉菜单

"use client"

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

API 参考

Item

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

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

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>