Material Components for Elm

A Material Design framework.

This library is based on Material Components for the web (MDC Web).

Important links

• Getting Started Guide (TODO)
• Demo

Quick start

This package relies upon JavaScript and CSS that need to be included in your project separately. As a result, this library will not work with e.g. elm reactor. Instead you will need to use either a HTML file or a bundler, such as webpack.

Using HTML

You should compile your Elm program to JavaScript and include it in a custom HTML document. From that HTML document, you have to include the following assets to use this library.

Please make sure that the last two assets match this library's version (ie. 6.0.0) exactly.

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/material-components-web-elm.min.css">
<script src="https://unpkg.com/[email protected]/dist/material-components-web-elm.min.js"></script>

Refer to the simple counter example for a minimal starting point, specifically to the files src/Main.elm and page.html.

Using a bundler

Install the JavaScript and CSS assets via npm:

$ npm install --save [email protected]

Then in your index.js add the following imports:

require("material-components-web-elm/dist/material-components-web-elm.js");
require("material-components-web-elm/dist/material-components-web-elm.css");

Contributions

Please share your experience using this library! Use GitHub to report bugs or ask questions, too.