Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including material-components-mithril with all npm packages installed. Try it out:

require("material-components-web/package.json"); // material-components-web is a peer dependency. require("mithril/package.json"); // mithril is a peer dependency. var materialComponentsMithril = require("material-components-mithril")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

material-components-mithril v0.1.0

Mithril components library compatible with material-compornents-web.

material-components-mithril

Mithril(v1) components library with material-components-web.

CircleCI / Codacy Badge

Usage

This library doesn't treat css at all, just define tags and add classes for MDC components.

So first, you have to implement css from "material-components-web".

In your HTML,

<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">

or

import "material-components-web/dist/material-components-web.css";

to inject style tags dynamically with tools like webpack css-loader + style-loader.

See more information about using material-components-web at the official document.


Secondly, load material-components-mithril.

(npm)

npm install material-components-mithril

(CDN)

<script src="https://unpkg.com/material-components-mithril/"></script>

Then, you can use components as below:

(CommonJS)

var m = require("mithril");
var mcm = require("material-components-mithril");
var button = {
    view: function() {
        return m(mcm.button, "Submit");
    }
};
m.mount(document.body, button);

(ES6)

import m from "mithril";
import {button} from "material-components-mithril";
m.mount(document.body, {
    view: () => m(button, "Submit")
});

(Browser)

<script src="https://unpkg.com/mithril/mithril.js"></script>
<script>
    var button = {
        view: function() {
            return m(materialComponentsMithril.button, "Submit");
        }
    };
    m.mount(document.body, button);
</script>

Codes above will make same results embedding button component at the element.

Examples

See https://h-ikeda.github.io/material-components-mithril/

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free