rum-mdl

Reusable material-design-lite react components written with rum

Using Rum-MDL

[rum "0.10.7"]
[rum-mdl "0.2.1"]

(require
 '[rum.core :as rum]
 '[rum.mdl  :as mdl])

Normally default mdl stylesheet is required for proper site rendering.

As you are using boot, then you can retrieve mdl css files with sift task from cljsjs/material jar.

If you’re using order version of boot than 2.6.0,

you should add additional dep coord [cljsjs/material "x.y.z-w"]. (See details.)

(sift :add-jar {'cljsjs/material #".*.css$"})
(sift :move {#".*/material.inc.css"     "material.inc.css"
             #".*/material.min.inc.css" "material.min.inc.css"})

and add a <link> tag in your index.html.

[:link {:rel "stylesheet" :href "material.inc.css"}]

References

• https://github.com/google/material-design-lite
• https://github.com/google/material-design-lite/blob/mdl-1.x/src/mdlComponentHandler.js
• https://design.google.com/icons/

Todo List

• Full wrapping mdl components

  Here is the list of components which are not fully wrapped yet.

  • tabs
  • footer
• Documentation
  • much more introduction

Changes

0.2.1

• Bumped cljsjs/material to 1.3.0-0

0.2.0

• Bumped cljsjs/material to 1.2.1-0
• Added chips components
  • mdl/chip
  • mdl/chip-text
  • mdl/chip-contact
  • mdl/chip-action
• Added :key-fn mixins to toggles
  • checkbox
  • radio
  • icon-toggle
  • switch
• [ BREAK ] Revised the header component
  • mdl/header doesn’t wrap its contents into .mdl-layout__header-row anymore.
  • Added explicit header-row component, mdl/header-row.

Known Issue

• google/material-design-lite#4809

0.1.3

• Workaround #2.

0.1.2

• Generate a content react key based on a content position.

0.1.1

• Respect existing key of react components. #1
• :should-update of mixin mdl-type now compares :rum.mdl/orig-args not :rum/args.

License

Copyright © 2016 aJchemist

Licensed under Eclipse Public License.