2015-10-15 56 views
0

我想有沿頁面的底部,但在H-箱創建一個頁腳什麼到目前爲止,我已經做了不起作用:重新使用COM箱佈局容器

(defn simple-title [txt] 
    [re-com/title 
    :label txt 
    :level :level1]) 

(defn main-panel [] 
    (fn [] 
    [v-box 
    :height "100%" 
    :children [[h-box 
       :width "100%" 
       :children [(simple-title "Should see right at top of page (works)")] 
       :align-self :start] 
       [h-box 
       :width "100%" 
       :gap "3em" 
       :align-self :end 
       :children [(simple-title "Want right at bottom (not working)") (simple-title "Just to its right")]]]])) 

我的理解是,:align-self :end應該做的伎倆。然而,第二個h-box出現在頁面的頂部,直接位於第一個h-box的下方。

+1

如果有方法可以在flexbox上自行演示問題,請發佈。對不起,我對ClojureScript不熟悉。 –

回答

0

試試這個(未經測試),並務必閱讀文檔:http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/layout

(defn main-panel [] 
    (fn [] 
    [v-box 
    :height "100%" 
    :width "100%"    ;; <-- added 
    :children [[h-box 
       :size "auto"  ;; <-- will expand to fill available space 
       :children [(simple-title "Should see right at top of page (works)")] 
       :align-self :start] 
       [h-box 
       :size "none" ;; <-- natural size (height) 
       :gap "3em" 
       :align-self :end 
       :children [(simple-title "Want right at bottom (not working)") (simple-title "Just to its right")]]]])) 
+0

這使得':align-self:end' * work *通過將第二個h-box內的內容放在頁面的右側。不幸的是,它仍然處於頂端。所以現在我的問題是:「如何使它解釋:結束爲底部?」 –

+0

那:align-self:end在h-box本身上工作,而不是在兩個孩子身上。 所以「:align-self:end」會將hbox本身推送到它的vbox父級橫軸上的「end」(右)。你有沒有經過一個很好的教程,如:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 嘗試刪除「:align-self:end」。你可能會得到你正在尋找的東西。 –

0

我與你的代碼打,並拿出這樣的:

(defn main-panel [] 
    (fn [] 
    [re-com/v-box 
    :height "100%" 
    :children [[re-com/h-box 
       ;:width "100%" ;; <-- not needed because parent v-box :align defaults to :stretch 
       :children [(simple-title "Should see right at top of page (works)")] 
       ;:align-self :start <-- not needed for same reason as :width "100%" above 
       ] 
       [re-com/box ;; <-- this is the magic that will push the h-box below to the bottom (actually, it's the :size "auto" that does it). 
       :size "auto" 
       :child ""] 
       [re-com/h-box 
       ;:width "100%" ;; <-- not needed for same reason as :width "100%" above 
       :gap "3em" 
       :align-self :end 
       :children [(simple-title "Want right at bottom (now working)") 
          (simple-title "Just to its right")]]]])) 

我還添加了一些評論有關你不需要的論點和原因。

最後,我注意到你使用()爲simple-title組件。請參閱:

https://github.com/Day8/re-frame/wiki/Using-%5B%5D-instead-of-%28%29

理解使用之間()和微妙的差別使用[]。