https://github.com/h-ikeda/material-components-mithril

Mithril(v1) components library with material-components-web.
https://github.com/h-ikeda/material-components-mithril

material material-components material-design material-design-lite mithril mithril-components mithril-ui

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/h-ikeda/material-components-mithril
• Owner: h-ikeda
• License: mit
• Created: 2017-03-28T10:58:49.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-03-08T20:59:39.000Z (almost 2 years ago)
• Last Synced: 2024-10-30T09:29:55.981Z (about 2 months ago)
• Topics: material, material-components, material-design, material-design-lite, mithril, mithril-components, mithril-ui
• Language: JavaScript
• Homepage: https://h-ikeda.github.io/material-components-mithril/
• Size: 467 KB
• Stars: 4
• Watchers: 3
• Forks: 1
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# material-components-mithril

Mithril(v1) components library with [material-components-web](https://github.com/material-components/material-components-web).

[![CircleCI](https://circleci.com/gh/h-ikeda/material-components-mithril.svg?style=svg)](https://circleci.com/gh/h-ikeda/material-components-mithril) / [![Codacy Badge](https://api.codacy.com/project/badge/Grade/424c4d2355fa409dba209b63c1102c38)](https://www.codacy.com/app/h-ikeda/material-components-mithril?utm_source=github.com&utm_medium=referral&utm_content=h-ikeda/material-components-mithril&utm_campaign=Badge_Grade)

## 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,

```

```

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](https://github.com/material-components/material-components-web/blob/master/docs/getting-started.md).

---

Secondly, load material-components-mithril.

(npm)

```

npm install material-components-mithril

```

(CDN)

```

```

---

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)

```

    var button = {

        view: function() {

            return m(materialComponentsMithril.button, "Submit");

        }

    };

    m.mount(document.body, button);

```

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

## Examples

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