106k
New

项目

PreviousNext

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

Radix UIBase 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,

示例

图标

使用带有 variant="icon" 的 ItemMedia 来显示图标。

Security Alert

New login detected from unknown device.

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

头像

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

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 {

图片

使用带有 variant="image" 的 ItemMedia 来显示图片。

组合

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

链接

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

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

下拉菜单

"use client"

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

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

用于显示媒体内容，如图标、图片或头像。

属性类型默认值
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>