CLJS-MUI

A ClojureScript Material-UI wrapper.

Material-UI v3.2.0

Leiningen/Boot

[id.nadiar/cljs-mui "0.1.0-alpha3"]

Clojure CLI/deps.edn

id.nadiar/cljs-mui {:mvn/version "0.1.0-alpha3"}

Usage

In progress library. Pull request are welcomed.

(:require [id.nadiar.cljs-mui.core :as mui] 
          [id.nadiar.cljs-mui.icons :as icon] 
          [id.nadiar.cljs-mui.style :as style])

Reagent example

(defn custom-styles [theme]
  (clj->js
    {:button {:margin (-> theme .-spacing .-unit)}
     :textField {:marginLeft (-> theme .-spacing .-unit)
                 :marginRight (-> theme .-spacing .-unit)}}))
                
(def with-my-styles (style/with-styles custom-styles))                
                
(defn my-button [{:keys [classes] :as props}]
  [mui/Button {:variant "contained"
               :color "primary"
               :className (.-button classes)}
   "Hello World!"
   [icon/ZoomOutTwoTone]])
                
(defn hello-world []
  [:div
   [:> (with-my-styles (reagent.core/reactify-component my-button))]])                

Fulcro example

(defn get-class 
  [this id] 
  (aget (-> this .-props .-classes) (name id))
  

(fulcro.client.primitives/defsc MyButton 
  [this props]
  {}
  (mui/Button {:variant "contained" 
               :color "primary" 
               :className (get-class this :button} 
    "Hello World! 
    (mui/ZoomOutTwoTone)))
    
(def my-button (fulcro.client.primitives/factory
                 ((style/with-style (fn [theme] 
                                      (clj->js {:button {:margin (-> theme .-spacing .-unit)} 
                                                :textField {:marginLeft (-> theme .-spacing .-unit)} 
                                                            :marginRight (-> theme .-spacing .-unit)}))) 
                  MyButton)))     

Fulcro example, thanks to Souenzzo

License

Copyright © 2018

Distributed under the Eclipse Public License v1.0.