mittwald Flow Logo

Components

FileCardList

Die FileCardList platziert mehrere FileCards in einem ColumnLayout und visualisiert Dateien samt relevanter Informationen.GitHub
    file1.txt
    file2.txt
    file3.txt
    file4.txt
    image.jpg

Playground

Verwende <FileCardList />, um eine Liste von FileCards darzustellen. Orientiere dich an der FileCard, um weitere Properties hinzuzufügen.

    file1.txt
    file2.txt
    file3.txt
    file4.txt
    image.jpg
import {
  FileCard,
  FileCardList,
} from "@mittwald/flow-react-components";

<FileCardList aria-label="Hochgeladene Dateien">
  <FileCard
    name="file1.txt"
    onDelete={() => {
      console.log("delete");
    }}
  />
  <FileCard
    name="file2.txt"
    onDelete={() => {
      console.log("delete");
    }}
  />
  <FileCard
    name="file3.txt"
    onDelete={() => {
      console.log("delete");
    }}
  />
  <FileCard
    name="file4.txt"
    onDelete={() => {
      console.log("delete");
    }}
  />
  <FileCard
    type="image/jpg"
    name="image.jpg"
    onDelete={() => {
      console.log("delete");
    }}
  />
</FileCardList>

Overview