我真的一直在努力与cljsjs图书馆，我可能花了整整两天的时间玩我的生活react-bootstrap interop，和各种material库clojurescript。在ClojureScript中，我该如何正确使用cljsjs/react-mdl？

基本上，我只是想能够获得UI组件到我的ClojureScript项目。如果你能推荐比cljsjs/react-mdl更好的东西，我很乐意。如果你知道如何帮助我目前的错误，我也会喜欢它！

我目前有：

(ns project.views 
    (:require [cljsjs.react-mdl])) 

(def Button (aget js/ReactMDL "Button"))

而我得到的错误：

ReactMDL is not defined

在JavaScript控制台

。

我只想得到一个react-mdl按钮显示在屏幕上。

我用这个包装： https://github.com/cljsjs/packages/tree/master/react-mdl

对于这个库： https://github.com/tleunen/react-mdl

而且在cljsjs这些互操作的指令：https://github.com/cljsjs/packages/wiki/Using-Packages

我还使用Clojure的reagent，并且reframe，如果那很重要。说实话，我只是想用Clojure和相关的库创建一些项目，如果你可以推荐我使用不同的堆栈，请做！

我只是俯视简单的东西？

来源

2016-02-05 Josh.F

我也有问题，所以在我一天的生活中，我回到了语义UI，它似乎处于更高层次，并且只是用于构建SPA。我注意到，当我在Slack组中询问时，MDL和Bootstrap都没有被推荐。这些是：Foundation，Basscss，语义UI。 –

@ChrisMurphy有！这是我需要的确切类型的建议:)是社区预占主导地位的松散组织吗？ CLJ（S）使用了多少个库？（我无法找到与你提到的那些3个框架/库集成了cljs的项目...） –

re-com是一个基于Reagent的UI库，你可能会喜欢，特别是当你已经在使用re-com。 –

我只是回答得到一个按钮。

我没有使用任何cljs库。我只是使用提供的css和js。他们需要在您的标记中，以及链接到材料设计图标库。

这是试剂的例子：在庵下

[:input {:type "submit" 
:className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
:value "ok"}]

这：

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

我很新的这一切，但我的选择是只使用css，保持将JavaScript降到最低，然后在项目使用的任何React包装中手动构建组件。

来源

2016-02-05 20:58:08

应该使用这样的：

(js/MaterialCheckbox element) 
(js/MaterialDataTable ...) 
;; and so on

你仍然需要require它以进口的js和css文件（即所有它真的）。它最初也把我扔了（当我为cljsjs包装它时）。

这是因为react-mdl通过在全球范围内公开的对象，比如看https://github.com/tleunen/react-mdl/blob/master/extra/material.js#L701

注：你可以只使用CSS的一些物体，比如@克里斯·墨菲的答案，但react-mdl点（而不是mdl）它可以在需要时作为反应组件管理生命周期。否则，你只需要mdl（这是完全没问题）。尽管对于一个简单的按钮可能无关紧要。

来源

2016-02-05 23:06:57 nha

这就是我制作react-mdl与Reagent一起使用。

客户端应用程序代码

要求包装project.clj：

[reagent "0.6.0" :exclusions [cljsjs/react]] 
[cljsjs/react-with-addons "15.3.1-0"] 
[cljsjs/react-mdl "1.5.4-0"]

要求命名空间：

(ns ,,, 
(:require ,,, 
      [cljsjs.react-mdl]))

创建组件的助手，你会使用：

现在，他们可以在Reagent视图中使用这样的：

[:> Button "Hello!"] 
[:> Slider {:min 0 :max 10}]

Server应用程序代码

react-mdl CSS文件和材料UI图标应该被纳入HTML。

CSS文件嵌入在cljsjs/react-mdl包内。要提取它，我用ring-cljsjs中间件：

; Add dependencies to project.clj 
[ring-cljsjs "0.1.0"] 
[cljsjs/react-mdl "1.5.4-0"] 

; Apply middleware to the Ring handler 
(ns app.handler 
    (:require ,,, 
      [ring.middleware.cljsjs :refer [wrap-cljsjs]])) 
,,, 
(-> ,,, 
    wrap-cljsjs) 

; Add link to CSS into Hiccup template for the served HTML file 
(ns ,,, 
    (:require ,,, 
      [hiccup.page :as h])) 
,,, 
[:head 
    [:meta {:charset "UTF-8"}] 
    [:meta {:name "viewport" :content "width=device-width, initial-scale=1"}] 

    (h/include-css "/cljsjs/react-mdl/material.min.css") 
    ,,,

从cljsjs包提取非JS资产的其他方式在project's wiki描述。

来源

2016-12-30 11:19:48

在ClojureScript中，我该如何正确使用cljsjs/react-mdl？

回答

客户端应用程序代码

Server应用程序代码

相关问题