FileCardList

Die FileCardList platziert mehrere FileCards in einem ColumnLayout.
  • 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>

Best Practices

  • Zeige hochgeladene Dateien sofort an. Das gibt dem User eine direkte Rückmeldung.
  • Gib der Liste ein aussagekräftiges aria-label.

Kombiniere mit ...

FileDropZone

Stelle mit der FileCardList die Dateien dar, die über eine FileDropZone hochgeladen wurden.

Dateien ablegen


    Properties

    PropertyTypeDescription
    children
    ReactNode
    columnGap
    s | m | l | xl
    Size of the column gap between the content blocks inside the column layout.
    gap
    s | m (default) | l | xl
    Size of the row and column gap between the content blocks inside the column layout.
    l
    (number | null)[]
    Column layout for container size l.
    m
    (number | null)[]
    Column layout for container size m.
    rowGap
    s | m | l | xl
    Size of the row gap between the content blocks inside the column layout.
    s
    (number | null)[]
    Column layout for container size s.
    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.

    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