Datei-Upload (Dropzone)
Upload-Zone (Untitled-UI-Muster): Klick oder Drag-and-Drop, Dateiliste mit Größe und Entfernen — Prototyp ohne Server-Upload, emittet dateien
Nutzt: ui.icon ui.featured-icon
Beispiele
Dropzone (klicken oder Dateien hineinziehen)
Anhänge
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| label | string | "" | Label |
| hint | string | "PNG, JPG oder PDF (max. 10 MB)" | Format-Hinweis |
| multiple | boolean | true | Mehrere Dateien |
| accept | string | "" | accept-Attribut (z.B. image/*,.pdf) |
| spacing | string: default | none | sm | md | lg | xl | "default" | Eigenabstand |
* Pflicht-Prop
Events & Slots
Events:
⚡ files — im Surface per on: {<event>: {action, params}} verdrahtbar.
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--file-upload-action-primary | var(--color-action-primary) |
--file-upload-border-default | var(--color-border-default) |
--file-upload-border-strong | var(--color-border-strong) |
--file-upload-form-background | var(--form-background) |
--file-upload-radius-control | var(--radius-control) |
--file-upload-radius-sm | var(--radius-sm) |
--file-upload-radius-surface | var(--radius-surface) |
--file-upload-status-danger | var(--color-status-danger) |
--file-upload-surface-sunken | var(--color-surface-sunken) |
--file-upload-text-default | var(--color-text-default) |
--file-upload-text-muted | var(--color-text-muted) |
Genutzte Design-Tokens
border.hairlinecolor.action.primarycolor.border.defaultcolor.border.strongcolor.status.dangercolor.surface.sunkencolor.text.defaultcolor.text.mutedduration.fasteasing.standardfont.family.defaultform.backgroundradius.controlradius.smradius.surfacesize.12size.3size.4size.6size.8text.smtext.xsweight.mediumweight.semibold