Material Components for Elm

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. 9.1.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/material-components-web-elm@9.1.0/dist/material-components-web-elm.min.css">
<script src="https://unpkg.com/material-components-web-elm@9.1.0/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 material-components-web-elm@9.1.0

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");