om.next sablono render nested elements in a button

Question

Using om.next and sablono, I am trying to style a button with mdl, as seen there.

Here is what I tried in my render method :

;; This works but misses the icon
[:input {:type "submit"
         :className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
         :value "ok"}]

;; The following work, but I would like to avoid using a string
[:button {:className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
           :dangerouslySetInnerHTML {:__html "<i class=\"material-icons\">add</i>" }}]


;; All the following do not render the inside of the icon properly

[:input {:type "submit"
         :className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
         :dangerouslySetInnerHTML {:__html [:i {:className "material-icons"} "add"]}}]

[:input {:type "submit"
         :className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"}
 [:i {:className "material-icons"} "add"]]

[:input {:type "submit"
         :className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"
         :dangerouslySetInnerHTML {:__html ~(html [:i {:className "material-icons"} "add"])}}]

Update: I did package react-mdl https://github.com/cljsjs/packages/tree/master/react-mdl/resources/cljsjs/react-mdl (although I no longer use it, but it has received updates already on cljsjs - yay OSS). — nha, Dec 02 '16 at 16:16

Chris Murphy · Accepted Answer · 2016-01-31T15:31:43.350

1

I will have to take sablono out of the equation. This example works:

(defui MDSubmitButton
  Object
  (render [this]
    (dom/button (clj->js {:className "mdl-button mdl-js-button mdl-button--fab mdl-button--colored"})
                (dom/i (clj->js {:className "material-icons"}) "add"))))
(def md-submit-button (om/factory MDSubmitButton {:keyfn :id}))

The missing ingredient for me was this line:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

, in the Markup.

In total this is all the markup I used:

<link href="/css/material.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

I believe that Javascript is required a ripple effects and so on, just not needed to answer this question.

I suspect you may have also missed the "Material Icons". To find out what was actually going on I pressed the "Open in CodePen" graphic/button from this page

edited Jan 31 '16 at 15:31

answered Jan 31 '16 at 13:38

Chris Murphy

6,411
1
24
42

Hello, no I have all those imports, and it works for the inlined (second) version. I would like to avoid the "dangerouslySetInnerHTML" field though. – nha Jan 31 '16 at 17:39
Hi. Well you got me into Material UI now. I've been using Semantic UI until now but not done enough that can't change. Will be interesting to see how Sablono takes off (or not) with ON. I can't really see that it gives you that much extra. I was going to use it at the outset but the Github site never said anything about Om Next so I left it alone. – Chris Murphy Jan 31 '16 at 17:57
You have been using semantic with ON successfully ? About the inline thing, it doesn't give a lot in that example, still it feels hacky (and I just started with material). – nha Jan 31 '16 at 18:21
1

With Semantic UI I've only put together a grid, and that was pain-free. Using only css part no JS. I've realised I s/have done a table to get scroll bar, hence no problem for me to switch to Material, which looks more mature and has all the 'desktop' components, and is light which is what we want for cljs b/c we prefer to build our own components. Seems like it has good effects without any learning required. – Chris Murphy Jan 31 '16 at 18:52
1

I am finding out that mdl has problems (too much js), so I would not recommend using it straight. https://github.com/tleunen/react-mdl looks like a viable alternative. – nha Jan 31 '16 at 20:54
Got it I think. Problems with scrolling, fixed for now by using files from [here](https://github.com/tleunen/react-mdl/tree/master/extra). Other css libs used with cljs: Foundation, Basscss, Bootstrap 3. – Chris Murphy Feb 01 '16 at 01:25
1

that's helpful. I am going to package react-mdl for clojurescript as soon as possible. – nha Feb 01 '16 at 08:51

om.next sablono render nested elements in a button

1 Answers1