mittwald Flow Logo

Components

FileCard

Die FileCard visualisiert Dateien samt relevanter Informationen.GitHub
image.jpg48KB

Playground

Verwende <FileCard />, um eine FileCard darzustellen. Diese kann auch als FileCardList erweitert werden.

image.jpg48KB
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.

image.jpg48KB
import { FileCard } from "@mittwald/flow-react-components";

<FileCard
  type="image/jpg"
  name="image.jpg"
  sizeInBytes={47500}
  onDelete={() => {
    console.log("delete");
  }}
/>

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
import { FileCard } from "@mittwald/flow-react-components";

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

Mit ContextMenu

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

image.jpg48KB
import {
  ContextMenu,
  FileCard,
  MenuItem,
} from "@mittwald/flow-react-components";

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

Mit Bild

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

image.jpg48KB
import { FileCard } from "@mittwald/flow-react-components";

<FileCard
  type="image/jpg"
  name="image.jpg"
  sizeInBytes={47500}
  imageSrc="https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg"
/>

Mit ProgressBar

Nutze eine <ProgressBar /> innerhalb der FileCard, um beispielsweise einen Upload Fortschritt anzuzeigen.

import {
  FileCard,
  Label,
  ProgressBar,
} from "@mittwald/flow-react-components";

<FileCard>
  <ProgressBar
    value={2.1}
    maxValue={3.4}
    minValue={0}
    showMaxValue
    formatOptions={{ style: "unit", unit: "megabyte" }}
  >
    <Label>Image.png</Label>
  </ProgressBar>
</FileCard>

Mit zusätzlichen Buttons

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

image.jpg
import {
  FileCard,
  Button,
  IconChevronDown,
  IconChevronUp,
} from "@mittwald/flow-react-components";

<FileCard
  type="image/jpg"
  name="image.jpg"
  onDelete={() => {
    console.log("delete");
  }}
>
  <Button>
    <IconChevronUp />
  </Button>
  <Button>
    <IconChevronDown />
  </Button>
</FileCard>

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
import {
  FileCard,
  Text,
} from "@mittwald/flow-react-components";

<FileCard name="image.jpg" isFailed>
  <Text>Datei konnte nicht hochgeladen werden</Text>
</FileCard>

Overview