+STARTUP: content

+TITLE: rum-mdl

+AUTHOR: aJchemist

+DESCRIPTION: Reusable material-design-lite react components written with rum

+UPDATE: Thu Jun 30 11:58:29 2016

+LINK: rum https://github.com/tonsky/rum

+LINK: react https://facebook.github.io/react/

+LINK: mdl https://getmdl.io

+LINK: boot https://boot-clj.com

[[https://clojars.org/rum-mdl][https://img.shields.io/clojars/v/rum-mdl.svg]]

Reusable [[mdl][material-design-lite]] [[react]] components written with [[rum]]

** Using Rum-MDL

+NAME: dependencies

+begin_src clojure

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

+end_src

+NAME: require

+begin_src clojure

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

+end_src

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.

+begin_quote

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 [[https://github.com/boot-clj/boot/commit/4fde407d830fae5ab64448890c0bc54f1d3e3062][details]].)

+end_quote

+NAME: asset

+begin_src clojure

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

".*/material.min.inc.css" "material.min.inc.css"})

+end_src

and add a == tag in your =index.html=.

+begin_src clojure

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

+end_src

** 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 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

• https://github.com/google/material-design-lite/pull/4809

*** 0.1.3

• Workaround [[https://github.com/aJchemist/rum-mdl/issues/2][#2]].

*** 0.1.2

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

*** 0.1.1

• Respect existing key of react components. [[https://github.com/aJchemist/rum-mdl/issues/1][#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.