‍

Components

Integrations

FileCard

Die FileCard visualisiert Dateien samt relevanter Informationen.
image.jpg48KB
import { FileCard } from "@mittwald/flow-react-components";

<FileCard
  type="image/jpg"
  name="image.jpg"
  sizeInBytes={47500}
/>

Best Practices

  • Zeige hochgeladene Dateien sofort an. Das gibt dem User eine direkte Rückmeldung.
  • Mach relevante Informationen wie Dateiname, Dateigröße und Dateityp klar erkennbar.
  • Biete wichtige Interaktionen als Aktionen an. Ein Beispiel ist das Entfernen der Datei.
  • Stelle mehrere Dateien mit der FileCardList‍ dar. Häufig ergänzt die FileCard eine FileDropZone‍ oder ein FileField‍.

Mit Delete Button

Verwende delete, um in der FileCard einen Button‍ anzuzeigen, mit dem die Datei unmittelbar entfernt werden kann.

image.jpg48KB

Mit Link

Die FileCard ermöglicht es, Dateien über einen href-Link zu öffnen, z. B. um ein Bild in einem neuen Tab anzuzeigen.

image.jpg48KB

Mit Bild

Statt eines passenden Icons kann durch imageSrc zur Vorschau ein Bild angezeigt werden.

image.jpg48KB

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.

image.jpg

Kombiniere mit ...

Button

Platziere einen oder mehrere Button‍ innerhalb der FileCard, um zusätzliche Optionen anzubieten.

image.jpg

ContextMenu

Nutze ein <ContextMenu /> innerhalb der FileCard, um wichtige Interaktionen in einem ContextMenu‍ zu platzieren.

image.jpg48KB

ProgressBar

Nutze eine ProgressBar‍ innerhalb der FileCard, um beispielsweise einen Upload-Fortschritt anzuzeigen.

Properties

PropertyTypeDescription
className
string
The elements class name.
download
string | boolean
Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
elementType
div | ExoticComponent<{}> | li
The HTML element or React component rendered as the elements root.
href
string
A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).
imageSrc
string
The source of an image file.
isFailed
boolean
Whether the file card is in a failed state.
name
string
The name of the file.
sizeInBytes
number
The size of the file in bytes.
target
HTMLAttributeAnchorTarget
The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
type
string
The type of the file.
wrapWith
ReactElement<unknown, string | JSXElementConstructor<any>>
A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.

Events

PropertyTypeDescription
onDelete
(() => void)
Handler that is called when the file cards delete button is clicked.
onPress
((e: PressEvent) => void)
Handler that is called when the press is released over the target.

Accessibility

PropertyTypeDescription
aria-describedby
string
Identifies the element (or elements) that describes the object. @see aria-labelledby
aria-hidden
Booleanish
Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
aria-label
string
Defines a string value that labels the current element. @see aria-labelledby.
aria-labelledby
string
Identifies the element (or elements) that labels the current element. @see aria-describedby.

Auf dieser Seite