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.
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>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!" ]
]$ make build-demo
$ open build/index.html$ build.cmd build-demo
$ build/index.html$ make docs$ build.cmd docsContributions are warmly encouraged - please get in touch! Use GitHub to report bugs, too.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent