2016-06-18 4 views
0

私は反応ラッパーとしてquiescentライブラリを使用しています。私はdevcardsを使いたいと思っていました。私はそれがちょうどうまくいくと思っていました。たとえomのように静止しているマクロが本当にないと思ったとしても(私はまだdevcardsについてよく知らない)。カードを作成するとカードが壊れてしまいます。

とにかく、私はそれがすべてfigwheelとすべてとセットアップ、そしてそれは一種の作業だが、カードのUI少し奇抜でしまった:

まず、ここで私は相対的なコードだと思うものです:

(ns punt.core 
    (:require [quiescent.core :as q] 
      [quiescent.dom :as d]) 
    (:require-macros [devcards.core :refer [defcard]])) 

(def div1 (d/div {} 
       (d/h1 {} "hello") 
       (d/p {} "paragraph") 
       (d/h2 {} "second header") 
       (d/p {} "another paragraph"))) 

(def div2 (d/div {} 
       (d/h1 {} "a better hello") 
       (d/p {} "my favorite pargrauph"))) 

(q/defcomponent vertical-split [left right percentage] 
    (d/div {} 
     (d/div {:style {:float "left" 
         :width (str percentage "%") 
         :height "400px"}} 
       left) 
     (d/div {:style {:float "right" 
         :width (str (- 100 percentage) "%") 
         :height "400px"}} 
       right))) 

(defcard fifty-fifty 
    "Description" 
    (vertical-split div1 div2 50)) 

(defcard fifty-fifty 
    (vertical-split div1 div2 80)) 

カードの内容は私の予想通りですが、各カードのタイトルバーは少し狂っています。 What i'm seeing

私の診断は何とかdevcards私が静止して作られたHTMLを認識しないということなので、それだけでカードに入れていません:実際に絵をので、ここであなたが行く、それを説明するよりも便利です。次に何らかの理由でHTMLをレンダリングし、次のカードがレンダリングされ、タイトルバーが前のカードまで伸びて、私が作ったものと重なるようにプログラムされているようです。

私の基本的な質問は、静止画を使用する方法です。

答えて

0

答えはとても簡単で、驚くほどです.HTMLとCSSの知識が不足しています。コンテナのdivを使用することによって、overflow: autoが実際のコンテンツを含むようにカードを展開します。

関連する問題