re-com.box — re-com 2.13.0

align-style cljs

(align-style attribute align)

Determines the value for the flex align type attributes. This parameter determines how children are aligned on the cross axis. The justify parameter is a keyword. Reference: http://www.w3.org/TR/css3-flexbox/#align-items-property

border cljs

(border &
        {:keys [size width height min-width min-height max-width max-height
                margin padding border l-border r-border t-border b-border radius
                child class style attr src debug-as]
         :or {size "none"}
         :as args})

Returns hiccup which produces a border component. This is the way borders are added to boxes, in favour of adding the border attributes directly to the boxes themselves. border property syntax: '<border-width> || <border-style> || <color>'

• border-width: thin, medium, thick or standard CSS size (e.g. 2px, 0.5em)
• border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
• color: standard CSS color (e.g. grey #88ffee)

border-args-desc cljs

box cljs

(box &
     {:keys [size width height min-width min-height max-width max-height justify
             align align-self margin padding child class style attr src
             debug-as]
      :or {size "none"}
      :as args})

Returns hiccup which produces a box, which is generally used as a child of a v-box or an h-box. By default, it also acts as a container for further child compenents, or another h-box or v-box

box-args-desc cljs

debug cljs

flex-child-style cljs

(flex-child-style size)

Determines the value for the 'flex' attribute (which has grow, shrink and basis), based on the :size parameter. IMPORTANT: The term 'size' means width of the item in the case of flex-direction 'row' OR height of the item in the case of flex-direction 'column'. Flex property explanation:

• grow Integer ratio (used with other siblings) to determined how a flex item grows it's size if there is extra space to distribute. 0 for no growing.
• shrink Integer ratio (used with other siblings) to determined how a flex item shrinks it's size if space needs to be removed. 0 for no shrinking.
• basis Initial size (width, actually) of item before any growing or shrinking. Can be any size value, e.g. 60%, 100px, auto Note: auto will cause the initial size to be calculated to take up as much space as possible, in conjunction with it's siblings :flex settings. Supported values:
• initial '0 1 auto' - Use item's width/height for dimensions (or content dimensions if w/h not specifed). Never grow. Shrink (to min-size) if necessary. Good for creating boxes with fixed maximum size, but that can shrink to a fixed smaller size (min-width/height) if space becomes tight. NOTE: When using initial, you should also set a width/height value (depending on flex-direction) to specify it's default size and an optional min-width/height value to specify the size it can shrink to.
• auto '1 1 auto' - Use item's width/height for dimensions. Grow if necessary. Shrink (to min-size) if necessary. Good for creating really flexible boxes that will gobble as much available space as they are allowed or shrink as much as they are forced to.
• none '0 0 auto' - Use item's width/height for dimensions (or content dimensions if not specifed). Never grow. Never shrink. Good for creating rigid boxes that stick to their width/height if specified, otherwise their content size.
• 100px '0 0 100px' - Non flexible 100px size (in the flex direction) box. Good for fixed headers/footers and side bars of an exact size.
• 60% '60 1 0px' - Set the item's size (it's width/height depending on flex-direction) to be 60% of the parent container's width/height. NOTE: If you use this, then all siblings with percentage values must add up to 100%.
• 60 '60 1 0px' - Same as percentage above.
• grow shrink basis 'grow shrink basis' - If none of the above common valaues above meet your needs, this gives you precise control. If number of words is not 1 or 3, an exception is thrown. Reference: http://www.w3.org/TR/css3-flexbox/#flexibility Diagram: http://www.w3.org/TR/css3-flexbox/#flex-container Regex101 testing: ^(initial|auto|none)|(\d+)(px|%|em)|(\d+)\w(\d+)\w(.*) - remove double backslashes

flex-flow-style cljs

(flex-flow-style flex-flow)

A cross-browser helper function to output flex-flow with all it's potential browser prefixes

gap cljs

(gap & {:keys [size width height class style attr] :as args})

Returns a component which produces a gap between children in a v-box/h-box along the main axis

gap-args-desc cljs

h-box cljs

(h-box &
       {:keys [size width height min-width min-height max-width max-height
               justify align align-self margin padding gap children class style
               attr]
        :or {size "none" justify :start align :stretch}
        :as args})

Returns hiccup which produces a horizontal box. It's primary role is to act as a container for components and lays it's children from left to right. By default, it also acts as a child under it's parent

h-box-args-desc cljs

justify-style cljs

(justify-style justify)

Determines the value for the flex 'justify-content' attribute. This parameter determines how children are aligned along the main axis. The justify parameter is a keyword. Reference: http://www.w3.org/TR/css3-flexbox/#justify-content-property

line cljs

(line &
      {:keys [size color class style attr]
       :or {size "1px" color "lightgray"}
       :as args})

Returns a component which produces a line between children in a v-box/h-box along the main axis. Specify size in pixels and a stancard CSS color. Defaults to a 1px lightgray line

line-args-desc cljs

scroll-style cljs

(scroll-style attribute scroll)

Determines the value for the 'overflow' attribute. The scroll parameter is a keyword. Because we're translating scroll into overflow, the keyword doesn't appear to match the attribute value

scroller cljs

(scroller &
          {:keys [size scroll h-scroll v-scroll width height min-width
                  min-height max-width max-height justify align align-self
                  margin padding child class style attr src debug-as]
           :or {size "auto"}
           :as args})

Returns hiccup which produces a scoller component. This is the way scroll bars are added to boxes, in favour of adding the scroll attributes directly to the boxes themselves. IMPORTANT: Because this component becomes the flex child in place of the component it is wrapping, you must copy the size attibutes to this componenet. There are three scroll types:

• h-scroll Determines how the horizontal scroll bar will be displayed.
• v-scroll Determines how the vertical scroll bar will be displayed.
• scroll Sets both h-scroll and v-scroll at once. Syntax: :auto [DEFAULT] Only show scroll bar(s) if the content is larger than the scroller. :on Always show scroll bar(s). :off Never show scroll bar(s). Content which is not in the bounds of the scroller can not be seen. :spill Never show scroll bar(s). Content which is not in the bounds of the scroller spills all over the place. Note: If scroll is set, then setting h-scroll or v-scroll overrides the scroll value

scroller-args-desc cljs

v-box cljs

(v-box &
       {:keys [size width height min-width min-height max-width max-height
               justify align align-self margin padding gap children class style
               attr]
        :or {size "none" justify :start align :stretch}
        :as args})

Returns hiccup which produces a vertical box. It's primary role is to act as a container for components and lays it's children from top to bottom. By default, it also acts as a child under it's parent

v-box-args-desc cljs