Playground
Verwende <FileCard />, um eine FileCard darzustellen. Diese kann auch als
FileCardList erweitert werden.
import { FileCard } from "@mittwald/flow-react-components"; <FileCard type="image/jpg" name="image.jpg" sizeInBytes={47500} />
Mit Delete Button
Verwende delete, um in der FileCard einen
Button anzuzeigen, mit dem die Datei
unmittelbar entfernt werden kann.
Mit Link
Die FileCard ermöglicht es, Dateien über einen href-Link zu öffnen, z. B. um
ein Bild in einem neuen Tab anzuzeigen.
Mit ContextMenu
Nutze ein <ContextMenu /> innerhalb der FileCard, um wichtige Interaktionen in
einem ContextMenu zu platzieren.
Mit Bild
Statt eines passenden Icons kann durch imageSrc zur Vorschau ein Bild
angezeigt werden.
Mit ProgressBar
Nutze eine <ProgressBar /> innerhalb der FileCard, um beispielsweise einen
Upload Fortschritt anzuzeigen.
Mit zusätzlichen Buttons
Platziere einen oder mehrere <Button /> innerhalb der FileCard, um zusätzliche
Optionen anzubieten.
Mit Failed State
Über das Property isFailed kann die FileCard im Failed State angezeigt werden,
um beispielsweise einen fehlgeschlagenen Upload anzuzeigen. Weitere
Informationen können im Subtitle der FileCard angezeigt werden.