Magma components are web components: custom elements you write like HTML tags, with any framework or without one. Props configure them, events tell you what happened, methods are functions you call on the element and slots take the content you put inside it.

Props

Set a prop as an HTML attribute in the markup, or as a property from JavaScript. The Attribute column gives the name of the attribute, a dash when it is the same as the property; props without one, such as arrays and functions, are set from JavaScript only. To turn a boolean attribute off, remove it: never write disabled="false".deletable - boolean | undefinedEnables the cross icon to perform cancel/delete action on element

description - string | undefinedOverrides the default filetype description

downloadable - boolean | undefinedEnables the download icon to perform the related action on element

filename (required) - stringThe filename shown as component title, is used to auto assign one of the filetype known in the filetype dictionary

filesize - string | undefinedThe 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.

format - string | undefinedSets if the download icon must be shown or not

icon - stringThe name of the icon or a base64 string to render it as an svg

message - string | undefinedSets a feedback message related to the component

src - string | undefinedThe image preview src if available of a file, useful if you have a logo to display, or a smaller version of a bigger image

suffix - 7z | ace | ai | db | default | dmg | doc | docm | docx | eml | eps | exe | flac | gif | heic | htm | html | jpe | jpeg | jpg | js | json | jsx | m2v | mp2 | mp3 | mp4 | mp4v | mpeg | mpg | mpg4 | mpga | odf | odp | ods | odt | ole | p7m | pdf | php | png | ppt | rar | rtf | sass | shtml | svg | tar | tiff | ts | tsd | txt | wav | webp | xar | xls | xlsx | xml | zip | undefinedOverrides the automatic filetype recongition by forcing the suffix to one of the available formats choosen

truncate - all | none | word | undefinedwordTruncates the filename shown

variant - amaranth | aqua | blue | error | green | info | lime | orange | orchid | primary | purple | red | sky | success | violet | warning | yellow | undefinedThe variant of the component, is shown only if the message attribute is defined

Events

mdsFileDeleteMdsFilePreviewEventDetailEmits when the component is removed, returning file infos

mdsFileDownloadMdsFilePreviewEventDetailEmits when the component is clicked, returning file infos