条目

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

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

🌐 The Item component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the ItemGroup component to create a list of items.

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add item
Copy

用法

🌐 Usage

Copyimport {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"

Copy<Item>
  <ItemMedia variant="icon">
    <Icon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Title</ItemTitle>
    <ItemDescription>Description</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button>Action</Button>
  </ItemActions>
</Item>

项目与字段

🌐 Item vs Field

如果你需要显示表单输入项，如复选框、输入框、单选按钮或下拉选择框，请使用 Field。

🌐 Use Field if you need to display a form input such as a checkbox, input, radio, or select.

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

🌐 If you only need to display content such as a title, description, and actions, use Item.

变体

🌐 Variant

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

🌐 Use the variant prop to change the visual style of the item.

import {
  Item,
  ItemContent,

大小

🌐 Size

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

🌐 Use the size prop to change the size of the item. Available sizes are default, sm, and xs.

import {
  Item,
  ItemContent,

示例

🌐 Examples

图标

🌐 Icon

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

🌐 Use ItemMedia with variant="icon" to display an icon.

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

头像

🌐 Avatar

你可以将 ItemMedia 与 variant="avatar" 一起使用来显示头像。

🌐 You can use ItemMedia with variant="avatar" to display an avatar.

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

图片

🌐 Image

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

🌐 Use ItemMedia with variant="image" to display an image.

Midnight City Lights - Electric Nights

Neon Dreams

3:45

Coffee Shop Conversations - Urban Stories

The Morning Brew

4:05

Digital Rain - Binary Beats

Cyber Symphony

3:30

Copy

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

View Code

群组

🌐 Group

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

🌐 Use ItemGroup to group related items together.

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

标题

🌐 Header

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

🌐 Use ItemHeader to add a header above the item content.

v0-1.5-sm

Everyday tasks and UI generation.

v0-1.5-lg

Advanced thinking or reasoning.

v0-2.0-mini

Open Source model for everyone.

Copy

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

View Code

链接

🌐 Link

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

🌐 Use the asChild prop to render the item as a link. The hover and focus states will be applied to the anchor element.

import {
  Item,
  ItemActions,

Copy<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>

下拉菜单

🌐 Dropdown

"use client"

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

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

条目

🌐 Item

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

🌐 The main component for displaying content with media, title, description, and actions.

ItemGroup

一个将相关项目组合在一起并具有一致样式的容器。

🌐 A container that groups related items together with consistent styling.

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

ItemSeparator

一组中项目之间的分隔符。

🌐 A separator between items in a group.

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

ItemMedia

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

🌐 Use ItemMedia to display media content such as icons, images, or avatars.

Copy<ItemMedia variant="icon">
  <Icon />
</ItemMedia>

Copy<ItemMedia variant="image">
  <img src="..." alt="..." />
</ItemMedia>

ItemContent

封装项目的标题和描述。

🌐 Wraps the title and description of the item.

Copy<ItemContent>
  <ItemTitle>Title</ItemTitle>
  <ItemDescription>Description</ItemDescription>
</ItemContent>

ItemTitle

显示项目的标题。

🌐 Displays the title of the item.

Copy<ItemTitle>Item Title</ItemTitle>

ItemDescription

显示条目的描述。

🌐 Displays the description of the item.

Copy<ItemDescription>Item description</ItemDescription>

ItemActions

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

🌐 Container for action buttons or other interactive elements.

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

ItemHeader

在项目内容上方显示标题。

🌐 Displays a header above the item content.

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

ItemFooter

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

🌐 Displays a footer below the item content.

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