File preview<mds-file-preview>Generato da @maggioli-design-system/magma@2.3.0dist/documentation.json. Incapsulamento: shadow.
Questa pagina è generata dai pacchetti Magma, documentati solo in inglese.
Il primo esempio della pagina Pattern, dal vivo. Cambia le sue proprietà qui sotto e l'anteprima le segue; Ripristina riporta l'esempio com'era.
Proprietà
suffixenumOverrides the automatic filetype recongition by forcing the suffix to one of the available formats choosen
truncateenumTruncates the filename shown
variantenumThe variant of the component, is shown only if the message attribute is defined
deletabledeletablebooleanEnables the cross icon to perform cancel/delete action on element
downloadabledownloadablebooleanEnables the download icon to perform the related action on element
descriptionstringOverrides the default filetype description
filenamestringThe filename shown as component title, is used to auto assign one of the filetype known in the filetype dictionary
filesizestringThe filesize shown, if you pass a string you can write whathever you want, if you pass a number it expect filesize in bytes, the component will format it automatically.
formatstringSets if the download icon must be shown or not
iconstringThe name of the icon or a base64 string to render it as an svg
messagestringSets a feedback message related to the component
srcstringThe image preview src if available of a file, useful if you have a logo to display, or a smaller version of a bigger image
Panoramica
The <mds-file-preview> web component is the Magma Design System card that previews an uploaded or referenced file, surfacing its name, size, type, and a format-aware icon or thumbnail. It pairs with <mds-input-upload> to represent each attached file and adds download/delete affordances around the bare file metadata.
Semantic Behavior
Format auto-detection: The filename extension determines the icon, badge colour, and human-readable description; suffix forces a specific known format and format is the resolved category.Download interaction: Clicking the card emits mdsFileDownload with { target, filename, extension }. The current release emits it whether or not downloadable is set, and downloadable renders no download icon.Delete affordance: When deletable is set, a light icon button renders in the corner and emits mdsFileDelete with the same detail payload, leaving the actual removal to the consumer.Filesize formatting: A numeric filesize string is treated as bytes and formatted automatically; any non-numeric string is shown verbatim.Preview vs. icon vs. status: A thumbnail renders only when src is set, the format supports preview, and no message is present; otherwise a format icon is shown, and when message is present the card switches to a status layout displaying that feedback text.Localization: Default type descriptions and action titles resolve through the locale system (el/en/es/it).
Properties & Visual Configurations
filename is the source of truth: beyond being the title, it drives icon, badge, and description inference, so prefer a real name with extension over a cosmetic label.suffix overrides extension detection when the filename is unreliable or missing an extension; pick from the known format set rather than passing the description directly.description overrides only the textual filetype caption, leaving icon and badge inference intact. The caption is shown only without filesize; with a size it stays as the badge tooltip.src supplies a thumbnail (e.g. a logo or downscaled image) shown in place of the generic icon when the format is previewable and no message is active.message turns the card into a feedback/status state (validation, error, progress text) and suppresses the thumbnail.
Component-specific variants and tones
The shared variant / tone ladders are defined in agents/variants.md. variant here is an avatar-flavored value and is rendered only when message is set, coloring the status layout; the format badge derives its own colour from the detected filetype independently (its tone is always weak).
Other behavioral props
icon overrides the auto-detected glyph with a Magma icon slug, an inline <svg ...> string or a data:image/svg+xml;base64, URI.truncate controls how the filename is shortened when it overflows, defaulting to 'word'.