Question

我希望在页面底部有一个h-box，但到目前为止我所做的并不起作用：

(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下方。

Answer 1

尝试此操作（未经测试）并务必阅读文档：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")]]]]))

Answer 2

我玩过您的代码并想出这个：

(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")]]]]))

我还添加了一些关于你不需要的论据和原因的评论。

最后，我注意到您使用{（{1}}组件。请参阅：

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

了解using（）和使用[]之间的细微差别。

使用re-com框布局容器

2 个答案: