Material Components for the Web for Elm

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

Live demo & ~~package documentation~~ (not released on package.elm-lang.org yet, see Building the documentation below).

The implementation is based on debois/elm-mdl, which uses the now abandoned Material Design Light framework.

Usage

This library depends on an external JavaScript asset elm-mdc.js which you have to require in your index.html. This library currently support MDC Web v0.37.1. Both assets, elm-mdc.js, and material-components-web.css are generated by running make.

Include elm-mdc.js before you include elm.js:

<body>
  <script src="elm-mdc.js"></script>
  <script src="elm.js"></script>

We recommend that you include the following resources as well:

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

We recommend that you load Roboto from Google Fonts and set .mdc-typography on <body>:

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>
<body class="mdc-typography">
</body>

Example application

See examples/hello-world/ for a full example. You have to run make in the root repository before to create the files elm-mdc.js and material-components-web.css.

module Main exposing (..)

import Html exposing (Html, text)
import Material
import Material.Button as Button
import Material.Options as Options


type alias Model =
    { mdc : Material.Model Msg
    }


defaultModel : Model
defaultModel =
    { mdc = Material.defaultModel
    }


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


main : Program Never Model Msg
main =
    Html.program
    { init = init
    , subscriptions = subscriptions
    , update = update
    , view = view
    }


init : ( Model, Cmd Msg )
init =
    ( defaultModel, Material.init Mdc )


subscriptions : Model -> Sub Msg
subscriptions model =
    Material.subscriptions Mdc model


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Mdc msg_ ->
            Material.update Mdc msg_ model

        Click ->
            ( model, Cmd.none )


view : Model -> Html Msg
view model =
    Html.div []
        [
          Button.view Mdc "my-button" model.mdc
              [ Button.ripple
              , Options.onClick Click
              ]
              [ text "Click me!" ]
        ]

Build instructions

Building the demo

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

Building the demo on Windows

$ build.cmd build-demo
$ build/index.html

Building the documentation

$ make docs

Building the documentation on Windows

$ build.cmd docs

Contribute

Contributions are warmly encouraged - please get in touch! Use GitHub to report bugs, too.

Failed to load latest commit information.
demo	Updated Comments docs for Typography	Aug 6, 2018
examples/hello-world	Fix example hello-world	Jul 18, 2018
src	Update Toolbar docs	Aug 16, 2018
.gitignore	Remove compiled assets	May 11, 2018
.travis.yml	Fix travis build error	May 16, 2018
LICENSE.md	Update license	Aug 30, 2016
Makefile	Update Startpage	Jun 23, 2018
README.md	Update to MDC Web 0.37.1	Aug 1, 2018
build.cmd	Add build batch file for Windows	Jun 11, 2018
elm-package.json	Update to MDC Web 0.37.1	Aug 1, 2018
package-lock.json	Typography headline1-6, subtitle1-2, overline	Aug 6, 2018
package.json	Update to MDC Web 0.37.1	Aug 1, 2018
shell.nix	Update to MDC Web 0.37.1	Aug 1, 2018
webpack.config.js	Add webpack.config.js	Apr 28, 2018
yarn.lock	Use `make` on Travis for docs and demo site, add demo images, add mat…	Dec 27, 2017

aforemny/elm-mdc

Join GitHub today

Clone with HTTPS

Launching GitHub Desktop...