FileCard
Die FileCard visualisiert Dateien samt relevanter Informationen.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.
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 Bild
Statt eines passenden Icons kann durch imageSrc zur Vorschau ein Bild
angezeigt werden.
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.
Kombiniere mit ...
Button
Platziere einen oder mehrere Button innerhalb der FileCard, um zusätzliche Optionen anzubieten.
ContextMenu
Nutze ein <ContextMenu /> innerhalb der FileCard, um wichtige Interaktionen in
einem ContextMenu zu platzieren.
ProgressBar
Nutze eine ProgressBar innerhalb der FileCard, um beispielsweise einen Upload-Fortschritt anzuzeigen.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
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
| Property | Type | Default | Description |
|---|---|---|---|
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
| Property | Type | Default | Description |
|---|---|---|---|
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. |