111k
新建

Item

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>Title</ItemTitle>
    <ItemDescription>Description</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button>Action</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 可以显示图片。

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

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 属性可以将项目渲染为链接。悬停和聚焦状态会应用到 anchor 元素上。

import {
  Item,
  ItemActions,
<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"

RTL

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

عنصر أساسي

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

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

import * as React from "react"

API 参考

Item

用于展示媒体、标题、描述和操作的主组件。

PropTypeDefault
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 可以显示图标、图片或头像等媒体内容。

PropTypeDefault
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

Displays a header above the item content.

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

ItemFooter

Displays a footer below the item content.

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