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
    id
    string
    children
    ReactNode
    translate
    yes | no
    className
    string
    style
    CSSProperties
    dir
    string
    lang
    string
    hidden
    boolean
    inert
    boolean
    @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert
    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.
    ref
    Ref<HTMLSpanElement>
    Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
    key
    Key
    autoFocus
    boolean
    defaultValue
    string | number | readonly string[]
    slot
    string
    enterKeyHint
    enter | done | go | next | previous | search | send
    inputMode
    text | none | search | url | tel | email | numeric | decimal
    Hints at the type of data that might be entered by the user while editing the element or its contents @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
    autoCorrect
    string
    spellCheck
    Booleanish
    defaultChecked
    boolean
    suppressContentEditableWarning
    boolean
    suppressHydrationWarning
    boolean
    accessKey
    string
    autoCapitalize
    none | (string & {}) | off | on | sentences | words | characters
    contentEditable
    Booleanish | inherit | plaintext-only
    contextMenu
    string
    draggable
    Booleanish
    nonce
    string
    tabIndex
    number
    title
    string
    radioGroup
    string
    role
    AriaRole
    about
    string
    content
    string
    datatype
    string
    inlist
    any
    prefix
    string
    property
    string
    rel
    string
    resource
    string
    rev
    string
    typeof
    string
    vocab
    string
    autoSave
    string
    color
    string
    itemProp
    string
    itemScope
    boolean
    itemType
    string
    itemID
    string
    itemRef
    string
    results
    number
    security
    string
    unselectable
    off | on
    popover
    | auto | manual | hint
    popoverTargetAction
    toggle | show | hide
    popoverTarget
    string
    is
    string
    Specify that a standard HTML element should behave like a defined custom built-in element @see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
    exportparts
    string
    @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts
    part
    string
    @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part
    dangerouslySetInnerHTML
    { __html: string | TrustedHTML; }
    s
    (number)[]
    Column layout for container size s.
    m
    (number)[]
    Column layout for container size m.
    l
    (number)[]
    Column layout for container size l.
    gap
    GapSizedefault: "m"
    Size of the row and column gap between the content blocks inside the column layout.
    rowGap
    GapSize
    Size of the row gap between the content blocks inside the column layout.
    columnGap
    GapSize
    Size of the column gap between the content blocks inside the column layout.

    Events

    PropertyTypeDescription
    onClick
    MouseEventHandler<HTMLElement>
    onClickCapture
    MouseEventHandler<HTMLElement>
    onAuxClick
    MouseEventHandler<HTMLElement>
    onAuxClickCapture
    MouseEventHandler<HTMLElement>
    onContextMenu
    MouseEventHandler<HTMLElement>
    onContextMenuCapture
    MouseEventHandler<HTMLElement>
    onDoubleClick
    MouseEventHandler<HTMLElement>
    onDoubleClickCapture
    MouseEventHandler<HTMLElement>
    onMouseDown
    MouseEventHandler<HTMLElement>
    onMouseDownCapture
    MouseEventHandler<HTMLElement>
    onMouseEnter
    MouseEventHandler<HTMLElement>
    onMouseLeave
    MouseEventHandler<HTMLElement>
    onMouseMove
    MouseEventHandler<HTMLElement>
    onMouseMoveCapture
    MouseEventHandler<HTMLElement>
    onMouseOut
    MouseEventHandler<HTMLElement>
    onMouseOutCapture
    MouseEventHandler<HTMLElement>
    onMouseOver
    MouseEventHandler<HTMLElement>
    onMouseOverCapture
    MouseEventHandler<HTMLElement>
    onMouseUp
    MouseEventHandler<HTMLElement>
    onMouseUpCapture
    MouseEventHandler<HTMLElement>
    onTouchCancel
    TouchEventHandler<HTMLElement>
    onTouchCancelCapture
    TouchEventHandler<HTMLElement>
    onTouchEnd
    TouchEventHandler<HTMLElement>
    onTouchEndCapture
    TouchEventHandler<HTMLElement>
    onTouchMove
    TouchEventHandler<HTMLElement>
    onTouchMoveCapture
    TouchEventHandler<HTMLElement>
    onTouchStart
    TouchEventHandler<HTMLElement>
    onTouchStartCapture
    TouchEventHandler<HTMLElement>
    onPointerDown
    PointerEventHandler<HTMLElement>
    onPointerDownCapture
    PointerEventHandler<HTMLElement>
    onPointerMove
    PointerEventHandler<HTMLElement>
    onPointerMoveCapture
    PointerEventHandler<HTMLElement>
    onPointerUp
    PointerEventHandler<HTMLElement>
    onPointerUpCapture
    PointerEventHandler<HTMLElement>
    onPointerCancel
    PointerEventHandler<HTMLElement>
    onPointerCancelCapture
    PointerEventHandler<HTMLElement>
    onPointerEnter
    PointerEventHandler<HTMLElement>
    onPointerLeave
    PointerEventHandler<HTMLElement>
    onPointerOver
    PointerEventHandler<HTMLElement>
    onPointerOverCapture
    PointerEventHandler<HTMLElement>
    onPointerOut
    PointerEventHandler<HTMLElement>
    onPointerOutCapture
    PointerEventHandler<HTMLElement>
    onGotPointerCapture
    PointerEventHandler<HTMLElement>
    onGotPointerCaptureCapture
    PointerEventHandler<HTMLElement>
    onLostPointerCapture
    PointerEventHandler<HTMLElement>
    onLostPointerCaptureCapture
    PointerEventHandler<HTMLElement>
    onScroll
    UIEventHandler<HTMLElement>
    onScrollCapture
    UIEventHandler<HTMLElement>
    onWheel
    WheelEventHandler<HTMLElement>
    onWheelCapture
    WheelEventHandler<HTMLElement>
    onAnimationStart
    AnimationEventHandler<HTMLElement>
    onAnimationStartCapture
    AnimationEventHandler<HTMLElement>
    onAnimationEnd
    AnimationEventHandler<HTMLElement>
    onAnimationEndCapture
    AnimationEventHandler<HTMLElement>
    onAnimationIteration
    AnimationEventHandler<HTMLElement>
    onAnimationIterationCapture
    AnimationEventHandler<HTMLElement>
    onTransitionCancel
    TransitionEventHandler<HTMLElement>
    onTransitionCancelCapture
    TransitionEventHandler<HTMLElement>
    onTransitionEnd
    TransitionEventHandler<HTMLElement>
    onTransitionEndCapture
    TransitionEventHandler<HTMLElement>
    onTransitionRun
    TransitionEventHandler<HTMLElement>
    onTransitionRunCapture
    TransitionEventHandler<HTMLElement>
    onTransitionStart
    TransitionEventHandler<HTMLElement>
    onTransitionStartCapture
    TransitionEventHandler<HTMLElement>
    onFocus
    FocusEventHandler<HTMLElement>
    onBlur
    FocusEventHandler<HTMLElement>
    onKeyDown
    KeyboardEventHandler<HTMLElement>
    onKeyUp
    KeyboardEventHandler<HTMLElement>
    onChange
    ChangeEventHandler<HTMLElement, Element>
    onCopy
    ClipboardEventHandler<HTMLElement>
    onCut
    ClipboardEventHandler<HTMLElement>
    onPaste
    ClipboardEventHandler<HTMLElement>
    onCompositionStart
    CompositionEventHandler<HTMLElement>
    onCompositionEnd
    CompositionEventHandler<HTMLElement>
    onCompositionUpdate
    CompositionEventHandler<HTMLElement>
    onSelect
    ReactEventHandler<HTMLElement>
    onBeforeInput
    InputEventHandler<HTMLElement>
    onInput
    InputEventHandler<HTMLElement>
    onCopyCapture
    ClipboardEventHandler<HTMLElement>
    onCutCapture
    ClipboardEventHandler<HTMLElement>
    onPasteCapture
    ClipboardEventHandler<HTMLElement>
    onCompositionEndCapture
    CompositionEventHandler<HTMLElement>
    onCompositionStartCapture
    CompositionEventHandler<HTMLElement>
    onCompositionUpdateCapture
    CompositionEventHandler<HTMLElement>
    onFocusCapture
    FocusEventHandler<HTMLElement>
    onBlurCapture
    FocusEventHandler<HTMLElement>
    onChangeCapture
    ChangeEventHandler<HTMLElement, Element>
    onBeforeInputCapture
    InputEventHandler<HTMLElement>
    onInputCapture
    InputEventHandler<HTMLElement>
    onReset
    ReactEventHandler<HTMLElement>
    onResetCapture
    ReactEventHandler<HTMLElement>
    onSubmit
    SubmitEventHandler<HTMLElement>
    onSubmitCapture
    SubmitEventHandler<HTMLElement>
    onInvalid
    ReactEventHandler<HTMLElement>
    onInvalidCapture
    ReactEventHandler<HTMLElement>
    onLoad
    ReactEventHandler<HTMLElement>
    onLoadCapture
    ReactEventHandler<HTMLElement>
    onError
    ReactEventHandler<HTMLElement>
    onErrorCapture
    ReactEventHandler<HTMLElement>
    onKeyDownCapture
    KeyboardEventHandler<HTMLElement>
    onKeyPress
    KeyboardEventHandler<HTMLElement>
    @deprecated Use `onKeyUp` or `onKeyDown` instead
    onKeyPressCapture
    KeyboardEventHandler<HTMLElement>
    @deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead
    onKeyUpCapture
    KeyboardEventHandler<HTMLElement>
    onAbort
    ReactEventHandler<HTMLElement>
    onAbortCapture
    ReactEventHandler<HTMLElement>
    onCanPlay
    ReactEventHandler<HTMLElement>
    onCanPlayCapture
    ReactEventHandler<HTMLElement>
    onCanPlayThrough
    ReactEventHandler<HTMLElement>
    onCanPlayThroughCapture
    ReactEventHandler<HTMLElement>
    onDurationChange
    ReactEventHandler<HTMLElement>
    onDurationChangeCapture
    ReactEventHandler<HTMLElement>
    onEmptied
    ReactEventHandler<HTMLElement>
    onEmptiedCapture
    ReactEventHandler<HTMLElement>
    onEncrypted
    ReactEventHandler<HTMLElement>
    onEncryptedCapture
    ReactEventHandler<HTMLElement>
    onEnded
    ReactEventHandler<HTMLElement>
    onEndedCapture
    ReactEventHandler<HTMLElement>
    onLoadedData
    ReactEventHandler<HTMLElement>
    onLoadedDataCapture
    ReactEventHandler<HTMLElement>
    onLoadedMetadata
    ReactEventHandler<HTMLElement>
    onLoadedMetadataCapture
    ReactEventHandler<HTMLElement>
    onLoadStart
    ReactEventHandler<HTMLElement>
    onLoadStartCapture
    ReactEventHandler<HTMLElement>
    onPause
    ReactEventHandler<HTMLElement>
    onPauseCapture
    ReactEventHandler<HTMLElement>
    onPlay
    ReactEventHandler<HTMLElement>
    onPlayCapture
    ReactEventHandler<HTMLElement>
    onPlaying
    ReactEventHandler<HTMLElement>
    onPlayingCapture
    ReactEventHandler<HTMLElement>
    onProgress
    ReactEventHandler<HTMLElement>
    onProgressCapture
    ReactEventHandler<HTMLElement>
    onRateChange
    ReactEventHandler<HTMLElement>
    onRateChangeCapture
    ReactEventHandler<HTMLElement>
    onSeeked
    ReactEventHandler<HTMLElement>
    onSeekedCapture
    ReactEventHandler<HTMLElement>
    onSeeking
    ReactEventHandler<HTMLElement>
    onSeekingCapture
    ReactEventHandler<HTMLElement>
    onStalled
    ReactEventHandler<HTMLElement>
    onStalledCapture
    ReactEventHandler<HTMLElement>
    onSuspend
    ReactEventHandler<HTMLElement>
    onSuspendCapture
    ReactEventHandler<HTMLElement>
    onTimeUpdate
    ReactEventHandler<HTMLElement>
    onTimeUpdateCapture
    ReactEventHandler<HTMLElement>
    onVolumeChange
    ReactEventHandler<HTMLElement>
    onVolumeChangeCapture
    ReactEventHandler<HTMLElement>
    onWaiting
    ReactEventHandler<HTMLElement>
    onWaitingCapture
    ReactEventHandler<HTMLElement>
    onDrag
    DragEventHandler<HTMLElement>
    onDragCapture
    DragEventHandler<HTMLElement>
    onDragEnd
    DragEventHandler<HTMLElement>
    onDragEndCapture
    DragEventHandler<HTMLElement>
    onDragEnter
    DragEventHandler<HTMLElement>
    onDragEnterCapture
    DragEventHandler<HTMLElement>
    onDragExit
    DragEventHandler<HTMLElement>
    onDragExitCapture
    DragEventHandler<HTMLElement>
    onDragLeave
    DragEventHandler<HTMLElement>
    onDragLeaveCapture
    DragEventHandler<HTMLElement>
    onDragOver
    DragEventHandler<HTMLElement>
    onDragOverCapture
    DragEventHandler<HTMLElement>
    onDragStart
    DragEventHandler<HTMLElement>
    onDragStartCapture
    DragEventHandler<HTMLElement>
    onDrop
    DragEventHandler<HTMLElement>
    onDropCapture
    DragEventHandler<HTMLElement>
    onSelectCapture
    ReactEventHandler<HTMLElement>
    onScrollEnd
    UIEventHandler<HTMLElement>
    onScrollEndCapture
    UIEventHandler<HTMLElement>
    onToggle
    ToggleEventHandler<HTMLElement>
    onBeforeToggle
    ToggleEventHandler<HTMLElement>

    Accessibility

    PropertyTypeDescription
    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.
    aria-describedby
    string
    Identifies the element (or elements) that describes the object. @see aria-labelledby
    aria-details
    string
    Identifies the element that provides a detailed, extended description for the object. @see aria-describedby.
    aria-activedescendant
    string
    Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
    aria-autocomplete
    list | none | inline | both
    Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
    aria-haspopup
    boolean | false | true | menu | listbox | tree | grid | dialog
    Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
    aria-controls
    string
    Identifies the element (or elements) whose contents or presence are controlled by the current element. @see aria-owns.
    aria-errormessage
    string
    Identifies the element that provides an error message for the object. @see aria-invalid @see aria-describedby.
    aria-atomic
    Booleanish
    Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
    aria-braillelabel
    string
    Defines a string value that labels the current element, which is intended to be converted into Braille. @see aria-label.
    aria-brailleroledescription
    string
    Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. @see aria-roledescription.
    aria-busy
    Booleanish
    aria-checked
    boolean | false | true | mixed
    Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. @see aria-pressed @see aria-selected.
    aria-colcount
    number
    Defines the total number of columns in a table, grid, or treegrid. @see aria-colindex.
    aria-colindex
    number
    Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. @see aria-colcount @see aria-colspan.
    aria-colindextext
    string
    Defines a human readable text alternative of aria-colindex. @see aria-rowindextext.
    aria-colspan
    number
    Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-colindex @see aria-rowspan.
    aria-current
    boolean | step | false | true | page | location | date | time
    Indicates the element that represents the current item within a container or set of related elements.
    aria-description
    string
    Defines a string value that describes or annotates the current element. @see related aria-describedby.
    aria-disabled
    Booleanish
    Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. @see aria-hidden @see aria-readonly.
    aria-dropeffect
    none | link | copy | execute | move | popup
    Indicates what functions can be performed when a dragged object is released on the drop target. @deprecated in ARIA 1.1
    aria-expanded
    Booleanish
    Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
    aria-flowto
    string
    Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
    aria-grabbed
    Booleanish
    Indicates an element's "grabbed" state in a drag-and-drop operation. @deprecated in ARIA 1.1
    aria-hidden
    Booleanish
    Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
    aria-invalid
    boolean | false | true | grammar | spelling
    Indicates the entered value does not conform to the format expected by the application. @see aria-errormessage.
    aria-keyshortcuts
    string
    Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
    aria-level
    number
    Defines the hierarchical level of an element within a structure.
    aria-live
    off | assertive | polite
    Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
    aria-modal
    Booleanish
    Indicates whether an element is modal when displayed.
    aria-multiline
    Booleanish
    Indicates whether a text box accepts multiple lines of input or only a single line.
    aria-multiselectable
    Booleanish
    Indicates that the user may select more than one item from the current selectable descendants.
    aria-orientation
    horizontal | vertical
    Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
    aria-owns
    string
    Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. @see aria-controls.
    aria-placeholder
    string
    Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
    aria-posinset
    number
    Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-setsize.
    aria-pressed
    boolean | false | true | mixed
    Indicates the current "pressed" state of toggle buttons. @see aria-checked @see aria-selected.
    aria-readonly
    Booleanish
    Indicates that the element is not editable, but is otherwise operable. @see aria-disabled.
    aria-relevant
    text | additions | additions removals | additions text | all | removals | removals additions | removals text | text additions | text removals
    Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. @see aria-atomic.
    aria-required
    Booleanish
    Indicates that user input is required on the element before a form may be submitted.
    aria-roledescription
    string
    Defines a human-readable, author-localized description for the role of an element.
    aria-rowcount
    number
    Defines the total number of rows in a table, grid, or treegrid. @see aria-rowindex.
    aria-rowindex
    number
    Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. @see aria-rowcount @see aria-rowspan.
    aria-rowindextext
    string
    Defines a human readable text alternative of aria-rowindex. @see aria-colindextext.
    aria-rowspan
    number
    Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. @see aria-rowindex @see aria-colspan.
    aria-selected
    Booleanish
    Indicates the current "selected" state of various widgets. @see aria-checked @see aria-pressed.
    aria-setsize
    number
    Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. @see aria-posinset.
    aria-sort
    none | ascending | descending | other
    Indicates if items in a table or grid are sorted in ascending or descending order.
    aria-valuemax
    number
    Defines the maximum allowed value for a range widget.
    aria-valuemin
    number
    Defines the minimum allowed value for a range widget.
    aria-valuenow
    number
    Defines the current value for a range widget. @see aria-valuetext.
    aria-valuetext
    string
    Defines the human readable text alternative of aria-valuenow for a range widget.

    Auf dieser Seite