‍

Components

Integrations

FileCardList

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

    PropertyTypeDefaultDescription
    childrenReactNode-
    columnGapGapSize-Size of the column gap between the content blocks inside the column layout.
    gapGapSize"m"Size of the row and column gap between the content blocks inside the column layout.
    l(number)[]-Column layout for container size l.
    m(number)[]-Column layout for container size m.
    rowGapGapSize-Size of the row gap between the content blocks inside the column layout.
    s(number)[]-Column layout for container size s.
    wrapWithReactElement<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

    PropertyTypeDefaultDescription
    aria-describedbystring-Identifies the element (or elements) that describes the object. @see aria-labelledby
    aria-hiddenBooleanish-Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
    aria-labelstring-Defines a string value that labels the current element. @see aria-labelledby.
    aria-labelledbystring-Identifies the element (or elements) that labels the current element. @see aria-describedby.

    Auf dieser Seite