@h3/mucky

MUCKy

Material UI Component Kit for yolk.js

Usage

mucky exposes a custom <MDL /> component, which is capable of dynamically rendering components from getmdl.io

You will need to add the getmdl.io js and css file you desire, by following the instructions for your preferred installation method on the getmdl.io site.

Once you have the getmdl.io js/css included in your page, you can dynamically render mdl based components from the getmdl.io site, by using the <MDL> component from @h3/mucky.

For example:

import {h} from 'yolk';
import {MDL} from '@h3/mucky`;

export function MyComponent({props, children, createEventHandler}){
	return (
		<MDL className="mdl-card">
			<div className="mdl-card__title">
				<h2 className="mdl-card__title-text">Welcome</h2>
			</div>
			<div className="mdl-card__supporting-text">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				Mauris sagittis pellentesque lacus eleifend lacinia...
			</div>
			<div className="mdl-card__actions mdl-card--border">
				<a className="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Get Started
				</a>
			</div>
			<div className="mdl-card__menu">
				<button className="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
					<i className="material-icons">share</i>
			</button>
			</div>
		</MDL>
	)
}