Mithril with Material Design Lite

by ramnathv

HTML

<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="//storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone">Content</div>
  <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone">goes</div>
  <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone">here</div>
</div>
<div id="root"></div>

CSS

@import "https://fonts.googleapis.com/icon?family=Material+Icons"

CoffeeScript

## https://gist.github.com/impinball/5e4d6e64aba2ffb7cd23
## Patches Mithril to accept components as well as strings
@m = ((o) ->
  Object.assign (->
    (if typeof arguments[0] == 'string' then o else o.component).apply undefined, arguments
  ), o
)(m)

Slider = 
  view: (ctrl, props) ->
    m 'input[type="range"].mdl-slider.mdl-js-slider', {
      min: "0", max: "100", value: "25", tabindex:"0"
    }
    
App = 
  view: (ctrl, props) ->
    m '.mdl-grid',
      m '.mdl-cell.mdl-cell--4-col-tablet', m Slider
      m '.mdl-cell.mdl-cell--4-col-tablet', m('b', "Hello")
    
m.mount(
  document.getElementById("root"),
  m App
)