Question

使用om.next和sablono，我尝试使用mdl设置按钮样式，如there所示。

以下是我在render方法中尝试的内容：

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

Answer 1

我将不得不将sablono排除在等式之外。这个例子有效：

(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}))

我缺少的成分是这一行：

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

，在标记中。

总的来说，这就是我使用的所有标记：

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

我认为Javascript需要涟漪效应等等，只是不需要回答这个问题。

我怀疑你可能也错过了＆＃34;材料图标＆＃34;。为了找出实际发生的情况，我按下了＃34; Open in CodePen＆＃34; this page

中的图形/按钮

om.next sablono在按钮中呈现嵌套元素

1 个答案: