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".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.

Events

mdsImgLoadErrorMdsImgEventDetailEmits when the image is not loaded

mdsImgLoadSuccessMdsImgEventDetailEmits when the image is successfully loaded