I componenti Magma sono web component: elementi personalizzati che scrivi come i tag HTML, con qualsiasi framework o senza. Le proprietà li configurano, gli eventi dicono cosa è successo, i metodi sono funzioni da chiamare sull'elemento e gli slot accolgono il contenuto che metti al suo interno.

Proprietà

Imposta una proprietà come attributo HTML nel markup, oppure come proprietà da JavaScript. La colonna Attributo dà il nome dell'attributo, un trattino quando coincide con la proprietà; le proprietà senza attributo, come array e funzioni, si impostano solo da JavaScript. Per spegnere un attributo booleano, rimuovilo: non scrivere mai disabled="false".alt - stringSpecifies an alternate text for an image

crossorigin - anonymous | use-credentials | undefineduse-credentialsAllow images from third-party sites that allow cross-origin access to be used with canvas

height - string | undefinedThe height attribute specifies the height of an image, in pixels.

loading - eager | lazy | undefinedlazySpecifies whether a browser should load an image immediately or to defer loading of images until some conditions are met.

referrerpolicy - no-referrer | no-referrer-when-downgrade | origin | origin-when-cross-origin | unsafe-url | undefinedno-referrer-when-downgradeSpecifies which referrer information to use when fetching an image.

sizes - string | undefinedOne or more strings separated by commas, indicating a set of source sizes. https://medium.com/@MRWwebDesign/responsive-images-the-sizes-attribute-and-unexpected-image-sizes-882a2eadb6db

src - string | undefinedSpecifies the path to the image

srcset - string | undefinedSpecifies a list of image files to use in different situations. Defines multiple sizes of the same image, allowing the browser to select the appropriate image source.

srcsetConsumptionsrcset-consumptionstring | undefinedSpecifies a list of image files to use in different situations. Defines multiple sizes of the same image, allowing the browser to select the appropriate image source based on consumption configuration.

<mds-img srcset-consumption="image-black-n-white-1x.jpg low, image-1x.jpg medium, image-2x.jpg high"></mds-img>

width - string | undefinedThe width attribute specifies the width of an image, in pixels.

Eventi

mdsImgLoadErrorMdsImgEventDetailEmits when the image is not loaded

mdsImgLoadSuccessMdsImgEventDetailEmits when the image is successfully loaded