Attachment

workspace.pngPNG · 820 KB

desk-reference.jpgJPG · 1.1 MB

office-reference.jpgJPG · 940 KB

sales-dashboard.pdfアップロード中 · 64%

message-renderer.tsxTypeScript · 12 KB

コピー

import { FileCodeIcon, XIcon } from "lucide-react"

import {

コードを見る

Attachment コンポーネントは、ファイルまたは画像の添付ファイル、そのメディア、名前、メタデータを、オプションのアクションおよびアップロード状態とともに表示します。チャットコンポーザ、メッセージスレッド、アップロードリストのファイルや画像に使用します。

インストール#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add attachment
コピー

使い方#

コピーimport {
  Attachment,
  AttachmentAction,
  AttachmentActions,
  AttachmentContent,
  AttachmentDescription,
  AttachmentMedia,
  AttachmentTitle,
} from "@/components/ui/attachment"

コピー<Attachment>
  <AttachmentMedia>
    <FileTextIcon />
  </AttachmentMedia>
  <AttachmentContent>
    <AttachmentTitle>sales-dashboard.pdf</AttachmentTitle>
    <AttachmentDescription>PDF · 2.4 MB</AttachmentDescription>
  </AttachmentContent>
  <AttachmentActions>
    <AttachmentAction aria-label="Remove sales-dashboard.pdf">
      <XIcon />
    </AttachmentAction>
  </AttachmentActions>
</Attachment>

構成#

次の構成を使用して添付ファイルを作成します。

コピーAttachment
├── AttachmentMedia
├── AttachmentContent
│   ├── AttachmentTitle
│   └── AttachmentDescription
├── AttachmentActions
│   └── AttachmentAction
└── AttachmentTrigger

AttachmentGroup を使用して、複数の添付ファイルをスクロール可能な行にレイアウトします。

コピーAttachmentGroup
├── Attachment
└── Attachment

特徴#

• AttachmentMedia を介したアイコンと画像メディア
• アップロード状態: idle、uploading、processing、error、done (組み込みのスタイルと進行中のシマー付き)
• 3 つのサイズと水平方向または垂直方向
• アクションは独立してクリック可能なままで、リンクまたはダイアログを開くフルカード AttachmentTrigger
• スクロール可能、エッジフェード付きスナップ AttachmentGroup
• 各パーツの className プロップによるカスタマイズ可能なスタイル

画像#

AttachmentMedia に variant="image" を設定し、その中に <img> をレンダリングします。orientation="vertical" を使用して、メディアをコンテンツの上に積み重ねます。

workspace.pngPNG · 820 KB

desk-reference.jpgJPG · 1.1 MB

office-reference.jpgJPG · 940 KB

コピー

import { XIcon } from "lucide-react"

import {

コードを見る

状態#

アップロードのライフサイクルを反映するように state を設定します。uploading と processing はタイトルをきらめかせ、error は破壊的なスタイルに切り替わります。

import {
  CheckIcon,
  ClockIcon,

サイズ#

size を使用して、default、sm、および xs を切り替えます。

import { FileTextIcon } from "lucide-react"

import {

グループ#

添付ファイルを AttachmentGroup でラップすると、水平方向にスクロール可能で、エッジフェードを備えたスナップ行にレイアウトされます。

briefing-notes.pdfPDF · 1.4 MB

workspace.pngPNG · 820 KB

customers.csvCSV · 18 KB

renderer.tsxTSX · 12 KB

コピー

import {
  FileCodeIcon,
  FileTextIcon,

コードを見る

トリガー#

AttachmentTrigger を追加して、カード全体にリンクまたはダイアログを開きます。アクションの後ろのカードを埋めるので、アクションはクリック可能なままになります。

import { CopyIcon, FileSearchIcon, XIcon } from "lucide-react"

import {

コピー<Dialog>
  <Attachment>
    {/* media, content, actions */}
    <DialogTrigger>
      <AttachmentTrigger aria-label="Preview research-summary.pdf" />
    </DialogTrigger>
  </Attachment>
  <DialogContent>{/* ... */}</DialogContent>
</Dialog>

アクセシビリティ#

AttachmentAction は Button をレンダリングし、AttachmentTrigger は実際の <button> (または render 経由の要素) をレンダリングします。両方が操作可能でアナウンスされるように、以下のガイダンスに従ってください。

アイコンのみのアクションにラベルを付ける#

AttachmentAction は通常アイコンのみなので、それぞれにアクションとそのターゲットを説明する aria-label を与えます。

コピー<AttachmentAction aria-label="Remove sales-dashboard.pdf">
  <XIcon />
</AttachmentAction>

トリガーにラベルを付ける#

AttachmentTrigger は、独自のテキストを持たないカードをカバーするため、アクティブ化すると何が行われるかについて aria-label を与えます。

コピー<AttachmentTrigger
  render={(props) => (
    <a
      {...props}
      href={url}
      target="_blank"
      rel="noreferrer"
      aria-label="Open workspace.png"
    />
  )}
/>

トリガーはスタック順でアクションの後ろにあるため、AttachmentAction と AttachmentTrigger が互いにトラップされることはありません。両方とも個別にフォーカス可能でクリック可能なままです。

キーボードスクロール#

AttachmentGroup は水平にスクロールします。添付ファイルがインタラクティブである場合 (トリガーまたはアクション)、キーボードユーザーはタブで画面外の項目にアクセスします。プレゼンテーション用添付ファイルの行の場合、tabIndex={0}、role="group"、および aria-label を追加して、グループ自体をフォーカス可能およびスクロール可能にします。

色を超えた意味#

error 状態では、破壊的な色が使用されています。状態が色だけで伝わらないように、失敗の理由を AttachmentDescription に保持します。

API リファレンス#

添付ファイル#

ルート添付コンテナ。

添付ファイルのメディア#

アイコンまたは画像プレビュー用のメディアスロット。

添付ファイルの内容#

タイトルと説明を折り返します。

添付ファイルのタイトル#

添付ファイルの名前。uploading または processing のときにきらめきます。

添付ファイルの説明#

ファイルの種類、サイズ、アップロードステータスなどの二次メタデータ。

添付ファイルのアクション#

添付ファイルの最後に揃えられた 1 つ以上のアクションのコンテナー。

添付ファイルのアクションボタン#

アクションボタン。Button をレンダリングし、そのプロパティをすべて受け入れます。

添付ファイルのトリガー#

添付ファイルをアクティブにするフルカードオーバーレイ。デフォルトで <button> をレンダリングします。

添付ファイルのグループ#

水平方向にスクロール可能なスナップ行に添付ファイルをレイアウトします。