2016-06-18 3 views
0

나는 반응 랩퍼로 quiescent 라이브러리를 사용하고 있습니다. 저는 devcards를 사용하고 싶었습니다. 나는 일종의 옴인처럼 정지 상태의 매크로가 없다고 생각했습니다. (나는 아직 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을 사용하여 카드를 확장하여 실제 내용을 포함하게됩니다.