Attachment

Menampilkan lampiran berupa berkas atau gambar, lengkap dengan media, metadata, status unggah, dan aksinya.

workspace.pngPNG · 820 KB

desk-reference.jpgJPG · 1.1 MB

office-reference.jpgJPG · 940 KB

sales-dashboard.pdfUploading · 64%

message-renderer.vueTypeScript · 12 KB

Komponen Attachment menampilkan lampiran berupa berkas atau gambar beserta media, nama, dan metadatanya, ditambah aksi dan status unggah kalau diperlukan. Cocok untuk berkas dan gambar di kolom penulisan chat, utas pesan, dan daftar unggahan.

Installation

pnpm dlx kliping@latest add attachment

Usage

vue

<script setup lang="ts">
import { FileTextIcon, XIcon } from '@lucide/vue'
import {
  Attachment,
  AttachmentAction,
  AttachmentActions,
  AttachmentContent,
  AttachmentDescription,
  AttachmentMedia,
  AttachmentTitle,
} from '@/components/ui/attachment'
</script>

<template>
  <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>
</template>

Composition

Susunan berikut adalah cara membangun sebuah attachment:

text

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

Pakai AttachmentGroup untuk menata beberapa lampiran dalam satu baris yang bisa digulir:

text

AttachmentGroup
├── Attachment
└── Attachment

Features

Media berupa ikon maupun gambar lewat AttachmentMedia.
Status unggah idle, uploading, processing, error, dan done, lengkap dengan style bawaan dan efek shimmer selagi berjalan.
Tiga pilihan ukuran, dengan orientasi mendatar atau tegak.
AttachmentTrigger seluas kartu yang membuka tautan atau dialog, tanpa mengganggu tombol aksi yang tetap bisa diklik sendiri.
AttachmentGroup yang bisa digulir dengan efek snap dan pudar di tepinya.
Style tiap bagian bisa disesuaikan lewat atribut class Vue.

Examples

Image

Isi variant="image" pada AttachmentMedia lalu taruh <img> di dalamnya. Pakai orientation="vertical" kalau medianya ingin ditumpuk di atas konten.

workspace.pngPNG · 820 KB

desk-reference.jpgJPG · 1.1 MB

office-reference.jpgJPG · 940 KB

Status

Isi state sesuai tahapan unggahnya. uploading dan processing membuat judulnya berkilat, sedangkan error mengubah tampilannya jadi bernuansa peringatan.

selected-file.pdfReady to upload

design-system.zipUploading · 64%

market-research.pdfProcessing document

financial-model.xlsx Upload failed. Try again.

uploaded-report.pdfUploaded · 1.8 MB

Ukuran

Pakai size untuk berpindah antara default, sm, dan xs.

Default attachmentPDF · 2.4 MB

Small attachmentPDF · 2.4 MB

Extra small attachment

Grup

Bungkus beberapa lampiran dengan AttachmentGroup untuk menatanya dalam satu baris mendatar yang bisa digulir, dengan efek snap dan pudar di tepinya.

briefing-notes.pdfPDF · 1.4 MB

workspace.pngPNG · 820 KB

customers.csvCSV · 18 KB

renderer.vueVue · 12 KB

Trigger

Tambahkan AttachmentTrigger supaya seluruh kartu bisa membuka tautan atau dialog. Ia mengisi kartu di belakang tombol aksi, jadi tombolnya tetap bisa diklik.

research-summary.pdfOpen preview dialog

vue

<template>
  <Dialog>
    <Attachment>
      <!-- media, content, actions -->
      <DialogTrigger as-child>
        <AttachmentTrigger aria-label="Preview research-summary.pdf" />
      </DialogTrigger>
    </Attachment>
    <DialogContent>
      <!-- ... -->
    </DialogContent>
  </Dialog>
</template>

Accessibility

AttachmentAction menghasilkan Button, sedangkan AttachmentTrigger menghasilkan <button> sungguhan (atau elemen Anda sendiri lewat as-child). Ikuti panduan di bawah agar keduanya bisa dioperasikan dan dibacakan dengan benar.

Beri label pada aksi yang hanya berupa ikon

AttachmentAction biasanya hanya berupa ikon, jadi berilah masing-masing aria-label yang menjelaskan aksinya dan sasarannya.

vue

<template>
  <AttachmentAction aria-label="Remove sales-dashboard.pdf">
    <XIcon />
  </AttachmentAction>
</template>

Beri label pada trigger

AttachmentTrigger menutupi seluruh kartu tanpa teks sendiri, jadi berilah aria-label yang menjelaskan apa yang terjadi saat ia diaktifkan.

vue

<template>
  <AttachmentTrigger as-child>
    <a
      :href="url"
      target="_blank"
      rel="noreferrer"
      aria-label="Open workspace.png"
    />
  </AttachmentTrigger>
</template>

Trigger-nya berada di belakang tombol aksi dalam urutan tumpukan, jadi AttachmentAction dan AttachmentTrigger tidak saling menghalangi — keduanya tetap bisa di-focus dan diklik secara terpisah.

Menggulir lewat keyboard

AttachmentGroup bergulir mendatar. Kalau lampirannya interaktif — punya trigger atau tombol aksi — pengguna keyboard bisa menjangkau item di luar layar lewat tombol Tab. Untuk deretan lampiran yang hanya bersifat tampilan, buat grupnya sendiri bisa di-focus dan digulir dengan menambahkan tabindex="0", role="group", dan aria-label.

Makna yang tidak bergantung warna

Status error memakai warna peringatan. Cantumkan alasan kegagalannya di AttachmentDescription supaya maknanya tidak bergantung pada warna semata.

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias `@` — disiapkan `kliping init`
npm packages	`class-variance-authority@^0.7.1`, `reka-ui@^2.10.3`
Kliping items	`button`
Files	`components/ui/attachment/attachment.vue` `components/ui/attachment/attachment-action.vue` `components/ui/attachment/attachment-actions.vue` `components/ui/attachment/attachment-content.vue` `components/ui/attachment/attachment-description.vue` `components/ui/attachment/attachment-group.vue` `components/ui/attachment/attachment-media.vue` `components/ui/attachment/attachment-title.vue` `components/ui/attachment/attachment-trigger.vue` `components/ui/attachment/index.ts`

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

vue

<AttachmentGroup>
  <Attachment>
    <AttachmentMedia />
    <AttachmentContent>
      <AttachmentTitle />
      <AttachmentDescription />
    </AttachmentContent>
    <AttachmentActions>
      <AttachmentAction />
    </AttachmentActions>
    <AttachmentTrigger />
  </Attachment>
</AttachmentGroup>
<Attachment>
  <AttachmentMedia />
  <AttachmentContent>
    <AttachmentTitle />
    <AttachmentDescription />
  </AttachmentContent>
  <AttachmentActions>
    <AttachmentAction />
  </AttachmentActions>
  <AttachmentTrigger />
</Attachment>

API Reference

Attachment

Wadah terluar attachment.

Prop	Type	Default	Description
`size?`	`"default" \| "sm" \| "xs"`	`"default"`	The attachment size.
`orientation?`	`"vertical" \| "horizontal"`	`"horizontal"`	Lay the media beside or above the content.
`state?`	`"done" \| "idle" \| "uploading" \| "processing" \| "error"`	`"done"`	The upload state. Drives styling and the shimmer.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"attachment"`
`[data-state]`	`"done" \| "idle" \| "uploading" \| "processing" \| "error"`
`[data-size]`	`"default" \| "sm" \| "xs"`
`[data-orientation]`	`"vertical" \| "horizontal"`

AttachmentMedia

Slot media untuk ikon atau pratinjau gambar.

Prop	Type	Default	Description
`variant?`	`"icon" \| "image"`	—	Whether the media holds an icon or an `<img>`.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"attachment-media"`
`[data-variant]`	`"icon" \| "image"`

AttachmentContent

Membungkus judul dan keterangan.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"attachment-content"`

AttachmentTitle

Nama lampirannya. Berkilat selagi statusnya uploading atau processing.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"attachment-title"`

AttachmentDescription

Metadata tambahan seperti tipe berkas, ukuran, atau status unggah.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"attachment-description"`

AttachmentActions

Wadah untuk satu atau beberapa aksi, diratakan ke sisi akhir lampiran.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"attachment-actions"`

AttachmentAction

Tombol aksi. Menghasilkan Button dan menerima atribut Vue yang diteruskan, misalnya aria-label.

Prop	Type	Default	Description
`variant?`	`"default" \| "destructive" \| "ghost" \| "outline" \| "secondary" \| "link"`	`"ghost"`	The button variant.
`size?`	`"default" \| "sm" \| "xs" \| "icon-xs" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`	`"icon-xs"`	The button size.
`asChild?`	`boolean`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`as?`	`AsTag \| Component`	—	The element or component this component should render as. Can be overwritten by `asChild`.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"attachment-action"`

AttachmentTrigger

Lapisan seluas kartu yang mengaktifkan lampiran. Menghasilkan <button> secara bawaan dan menerima atribut Vue yang diteruskan, misalnya aria-label.

Prop	Type	Default	Description
`asChild?`	`boolean`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`as?`	`AsTag \| Component`	`"button"`	The element or component this component should render as. Can be overwritten by `asChild`.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"attachment-trigger"`

AttachmentGroup

Menata lampiran dalam satu baris mendatar yang bisa digulir dengan efek snap.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"attachment-group"`

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border, --card, --card-foreground, --destructive, --foreground, --muted, --muted-foreground, --radius, --ring.

PreviousAspect Ratio Next Avatar

Attachment

Installation ​

Usage ​

Composition ​

Features ​

Examples ​

Image ​

Status ​

Ukuran ​

Grup ​

Trigger ​

Accessibility ​

Beri label pada aksi yang hanya berupa ikon ​

Beri label pada trigger ​

Menggulir lewat keyboard ​

Makna yang tidak bergantung warna ​

Requirements ​

Anatomy ​

API Reference ​

Attachment ​

AttachmentMedia ​

AttachmentContent ​

AttachmentTitle ​

AttachmentDescription ​

AttachmentActions ​

AttachmentAction ​

AttachmentTrigger ​

AttachmentGroup ​

CSS Variables ​

Installation

Usage

Composition

Features

Examples

Image

Status

Ukuran

Grup

Trigger

Accessibility

Beri label pada aksi yang hanya berupa ikon

Beri label pada trigger

Menggulir lewat keyboard

Makna yang tidak bergantung warna

Requirements

Anatomy

API Reference

Attachment

AttachmentMedia

AttachmentContent

AttachmentTitle

AttachmentDescription

AttachmentActions

AttachmentAction

AttachmentTrigger

AttachmentGroup

CSS Variables