AttachmentChips

Pliki dołączone do wiadomości lub komentarza, z rozmiarem, stanem przesyłania i przyciskiem usuwania. Bez onRemove jest to lista tylko do odczytu.

PodglądLink do sekcji Podgląd

Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.

Attached files

screenshot-2026-11-08.png420 KB

a-very-long-file-name-for-the-quarterly-error-report-with-details.pdf1.2 MB

trace.zipUploading

video.movToo large

notes.md2 KB

Attached files

screenshot-2026-11-08.png420 KB

a-very-long-file-name-for-the-quarterly-error-report-with-details.pdf1.2 MB

trace.zipUploading

video.movToo large

notes.md2 KB

Attached files

screenshot-2026-11-08.png420 KB

a-very-long-file-name-for-the-quarterly-error-report-with-details.pdf1.2 MB

trace.zipUploading

video.movToo large

notes.md2 KB

tsx

import { AttachmentChips } from '@skribly/ui/conversation'

tsx

<AttachmentChips
  label="Attached files"
  items={files}
  onRemove={(ids) => remove(ids)}
  removeLabel="Remove"
/>

Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.

Grupa znaczników: Tab wchodzi do niej, klawisze strzałek przechodzą między plikami, a Delete lub Backspace usuwa jeden.
Każdy przycisk usuwania jest nazwany swoim czasownikiem i plikiem, na przykład „Remove notes.md, 2 KB”.
Długie nazwy są ucinane na ekranie i odczytywane w całości.
Stany przesyłania i błędu mają ikonę i słowo.

Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.