MithrilJs - MDL

MithrilJs using Material Design Lite Components

by Ardian Shala

HTML

<script src="https://unpkg.com/mithril/mithril.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<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);

JavaScript

const { Mdl } = window.mithrilmdl;

let app = {
    oncreate: function () {
    	componentHandler.upgradeDom();
    },

    view: function () {
        return [
            m(Mdl.Layout,
                m(Mdl.LayoutHeader,
                    m("div", { class: "mdl-layout__header-row" },
                        m(Mdl.LayoutTitle, { title: "App Title" })
                    )
                ),
                m(Mdl.LayoutContent,
                    m(Mdl.Grid,
                        m(Mdl.Cell,
                            "Content goes here",
                            m("div",
                                m(Mdl.Button, { fab: true, colored: true, icon: "add" })
                            )
                        )
                    )
                )
            )
        ]
    }
};

m.mount(document.body, app);