Elmでマテリアルデザイン ref: http://qiita.com/jooex/items/c4f9b6dcc8014803456e

file0.txt

elm-package install debois/elm-mdl -y

file1.html

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500|Roboto+Mono|Roboto+Condensed:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.teal-red.min.css" />

file1.txt

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500|Roboto+Mono|Roboto+Condensed:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.teal-red.min.css" />

file10.txt

... model =
    {要素}.render Mdl    -- Msgで設定したMdl
        [ n , ..]        -- インデックス。どのパーツかの判断用
        model.mdl        -- modelで設定したmdlを渡す
        [ ...            -- Optionを付ける。cssとかイベントとかをつけたり、要素毎の設定がある。
        , ...
        , ... ]           
        [ ..             -- 子要素。Titleなど要素毎に決まった入れるものがあったりする。
        , ..
        ]
        ...

file11.txt

import Material.Tabs as Tabs

menuTab model =
    Tabs.render Mdl
        [ 5, 2 ]
        model.mdl
        [ Tabs.ripple
        , Tabs.onSelectTab SetTab
        , Tabs.activeTab model.tab
        ]
        [ Tabs.label [] [ text "basic" ]
        , Tabs.label [] [ text "" ]
        ]
        [ heroParaTable model ]

file2.txt

module Main exposing(..)

import Html exposing (text)
import Html.App exposing(program)

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

init = "" ! []
update msg model = model ! []
view model = text "hello"
subscriptions model = Sub.none

file3.txt

import Material
import Material.Button as Button
import Material.Options as Options exposing (css)

file4.txt

type alias Model = { mdl : Material.Model }

init : ( Model,Cmd a )
init = { mdl = Material.model } ! []

file5.txt

type Msg = Mdl ((Material.Msg Msg))

file6.txt

update msg model =
    case msg of
        Mdl msg' -> Material.update msg' model

file7.txt

module Main exposing(..)

import Html exposing (text)
import Html.App exposing(program)
import Html.Attributes exposing (href, class, style)

import Material
import Material.Scheme
import Material.Button as Button
import Material.Options as Options exposing (css)

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

type alias Model = {mdl :Material.Model }
type Msg = Mdl ((Material.Msg Msg))

init : (Model,Cmd a)
init = {mdl = Material.model } ! []

update msg model =
    case msg of
        Mdl msg' -> Material.update msg' model

view model = text "hello"
subscriptions model = Sub.none

file8.txt

import Material.List as Lists

view model =
  Lists.ul []
    <| List.indexedMap element model.data

element index data =
     Lists.li [Lists.withBody]                               
              [ Lists.content [] [ text data.supplier
                                 , Lists.body [] [ text data.address ] ]
              ]

file9.txt

import Material.Options as Options exposing (css)

wrapCss =
    [ css "position" "fixed"
    , css "width" "100%"
    ]


allWrap model =
    Options.div
        wrapCss
        [ allView model ]