Liking cljdoc? Tell your friends :D

CLJS-MUI

A ClojureScript Material-UI wrapper.

Material-UI v3.2.0

Clojars Project

Leiningen/Boot

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

Clojure CLI/deps.edn

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

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 :refer [theme] :as style]
          [goog.object :as gobj])

Reagent example

(def custom-style
  {:button {:margin (gobj/getValueByKeys theme "spacing" "unit")}
   :textField {:marginLeft (gobj/getValueByKeys theme "spacing" "unit")
               :marginRight (gobj/getValueByKeys 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/ZoomOut]])

(defn hello-world []
  [:div
   [:> (with-my-styles (reagent.core/reactify-component my-button))]])                

Fulcro example

(fulcro.client.primitives/defsc MyButton
                                [this props]
                                {}
                                (mui/Button {:variant   "contained"
                                             :color     "primary"
                                             :className (style/class-name this :button)}
                                            "Hello World!"
                                            (icon/ZoomOut)))

(def my-button (fulcro.client.primitives/factory
                 ((style/with-style {:button {:margin (gobj/getValueByKeys theme "spacing" "unit")}
                                     :textField {:marginLeft (gobj/getValueByKeys theme "spacing" "unit")
                                                 :marginRight (gobj/getValueByKeys theme "spacing" "unit")}})
                   MyButton)))  

Fulcro example, thanks to Souenzzo

License

Copyright © 2018

Distributed under the Eclipse Public License v1.0.

Can you improve this documentation?Edit on GitHub

cljdoc is a website building & hosting documentation for Clojure/Script libraries

× close