CODEWITHSUNDEEP
omsablono
nha
nha

Reputation: 18005

om.next sablono render nested elements in a button

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"])}}]

Upvotes: 1

Views: 195

Answers (1)

Chris Murphy
Chris Murphy

Reputation: 6509

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

Upvotes: 1

Related Questions