Material Components for the Web for Elm

Port of Google's Material Components for the Web CSS/JS implementation of the Material Design Specification.

The implementation is based on debois/elm-mdl.

Usage

Currently you will have to add the following scripts to your index.html before including elm.js.

<script src="elm-focus-trap.js"></script>
<script src="elm-global-events.js"></script>
<script src="elm-mdc.js"></script>

You will also want to include the following resources in your head:

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="material-components-web.css">

Example application

module Main exposing (..)

import Html
import Material
import Material.Button as Button
import Material.Options as Options


type alias Model
    { mdc : Material.Model
    }


defaultModel =
    { mdc = Material.defaultModel
    }


type Msg
    = Mdc (Material.Msg Msg)
    | Click


main =
    Html.program
    { init = init
    , subscriptions = subscriptions
    , update = update
    , view = view
    }


init =
    ( defaultModel, Material.init )


subscriptions model =
    Material.subscriptions Mdc


update msg model =
    case msg of
        Mdc msg_ ->
            Material.update Mdc msg_ model

        Click ->
            ( model, Cmd.none )


view model =
    Html.div []
        [
          Button.view Mdc [0] model.mdc
              [ Button.ripple
              , Options.onClick Click
              ]
              [ text "Click me!" ]
        ]

Build instructions

Building the demo

$ make setup
$ make build-demo
$ open build/index.html

Contribute