Installing Material Components and Initializing settings

Installing Material Components

Material Components is hosted on JSDelivr this means that you can easily import and use material Components without the downloads or install.

CSS

	<link href="https://lukeplays33.github.io/material-Components/Material_Components/M3Styling.css"
		rel="stylesheet" type="text/css" />

JavaScript (Elements and Functions)

// script tag
<script type='module'
src="https://lukeplays33.github.io/material-Components/Material_Components/imports.js"
theme="dark" position="bottom-right" defer></script>
		
// import statement
import * as MaterialComponents from 'https://lukeplays33.github.io/material-Components/Material_Components/imports.js';

Initializing Settings

Add the following import module to your main JS file.

This initializes the main editor, where a user can position and resize elements.

window.onload = function () { //initSettings should always be called from the onload event.
initSettings({ //returns its value to when called upon.
darkTheme:boolean,
themeColour:'hexColor',
themeStyle:'Sketch'
});
}

item	Description	Input
darkTheme	Sets the default theme of the site	Boolean
themeColour	Sets the theme color used to generate a color	Hex String
themeStyle	What colour pallete to follow	Sketch or Google

Note: It is recommended to keep the themeColour and themeStyle properties left out when loading M3 Components from an iframe.