125k

Item

PreviousNext

メディア、タイトル、説明、アクションを含むコンテンツを表示するための多用途コンポーネント。

BaseRadixReact Aria
基本項目

タイトルと説明を持つシンプルなアイテムです。

プロフィールが確認されました。
import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"

import { Button } from "@/components/ui/radix/button"

Item コンポーネントは、ほぼすべての種類のコンテンツを格納できる簡単なフレックス コンテナーです。タイトル、説明、アクションを表示するために使用します。これを 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 を構築します。

ItemGroup
└── Item
    ├── ItemHeader
    ├── ItemMedia
    ├── ItemContent
    │   ├── ItemTitle
    │   └── ItemDescription
    ├── ItemActions
    └── ItemFooter

項目とフィールド

チェックボックス、入力、ラジオ、または選択などのフォーム入力を表示する必要がある場合は、Field を使用します。

タイトル、説明、アクションなどのコンテンツのみを表示する場合は、Item を使用します。

バリエーション

variant プロップを使用して、項目の視覚スタイルを変更します。

デフォルトバリアント

背景が透明でボーダーのないスタイルです。

アウトラインバリアント

ボーダーが表示されるアウトラインスタイルです。

ミューテッドバリアント

副次的なコンテンツ向けのミュートされた背景です。

import { InboxIcon } from "lucide-react"

import {

サイズ

項目のサイズを変更するには、size プロップを使用します。利用可能なサイズは default、sm、xs です。

デフォルトサイズ

ほとんどのユースケースに適した標準サイズです。

スモールサイズ

密度の高いレイアウト向けのコンパクトサイズです。

エクストラスモールサイズ

利用可能な最もコンパクトなサイズです。

import { InboxIcon } from "lucide-react"

import {

アイコン

アイコンを表示するには、ItemMedia を variant="icon" とともに使用します。

セキュリティアラート

不明なデバイスからの新しいログインを検知しました。

import { ShieldAlertIcon } from "lucide-react"

import { Button } from "@/components/ui/radix/button"

アバター

ItemMedia を variant="avatar" とともに使用して、アバターを表示できます。

ER
Evil Rabbit

最終ログイン: 5か月前

ER
チームメンバーはいません

このプロジェクトで共同作業するためにチームを招待しましょう。

import { Plus } from "lucide-react"

import {

画像

画像を表示するには、ItemMedia を variant="image" とともに使用します。

import Image from "next/image"

import {

グループ

ItemGroup を使用して、関連する項目をグループ化します。

s
shadcn

shadcn@vercel.com

m
maxleiter

maxleiter@vercel.com

e
evilrabbit

evilrabbit@vercel.com

import * as React from "react"
import { PlusIcon } from "lucide-react"

ヘッダー

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 {

リンク

asChild プロップを使用して項目をリンクとしてレンダリングします。ホバー状態とフォーカス状態はアンカー要素に適用されます。

import { ChevronRightIcon, ExternalLinkIcon } from "lucide-react"

import {
<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 { ChevronDownIcon } from "lucide-react"

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

عنصر أساسي

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

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

import * as React from "react"

API リファレンス

アイテム

メディア、タイトル、説明、およびアクションを含むコンテンツを表示するための主要コンポーネント。

プロップタイプデフォルト
variant"default" | "outline" | "muted""default"
size"default" | "sm" | "xs""default"
asChildbooleanfalse

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

ItemTitle

項目のタイトルを表示します。

<ItemTitle>Item Title</ItemTitle>

項目説明

項目の説明を表示します。

<ItemDescription>Item description</ItemDescription>

ItemActions

アクション ボタンまたはその他のインタラクティブ要素のコンテナー。

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

ItemHeader

項目コンテンツの上にヘッダーを表示します。

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

アイテムフッター

項目コンテンツの下にフッターを表示します。

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