MithrilJs - MDL Babel

MithrilJs using Material Design Lite Components

by Ardian Shala

HTML

<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://cdn.rawgit.com/oardi/mithrilmdl/b6a41e1f/dist/mithrilmdl.js"></script>

CSS

@import url(//fonts.googleapis.com/icon?family=Material+Icons);

Babel + JSX

/* @jsx m */
const { Mdl } = window.mithrilmdl;

class App {

	constructor() {
  }

	view() {
		return (
			<Mdl.Layout>

				<Mdl.LayoutHeader>
					<div class="mdl-layout__header-row">
						<Mdl.LayoutTitle title="App Title" />
					</div>
				</Mdl.LayoutHeader>

				<Mdl.LayoutContent>

					<Mdl.Grid>
						<Mdl.Cell>
							Content goes here
							<div>
								<Mdl.Button fab colored icon="add" />
							</div>
						</Mdl.Cell>
					</Mdl.Grid>

				</Mdl.LayoutContent>

			</Mdl.Layout>
		)
	}
}

m.mount(document.body, App);