Liking cljdoc? Tell your friends :D

day8.re-frame.trace.utils.re-com

cljs

Shameless pilfered from re-com.

Shameless pilfered from re-com.
raw docstring

align-stylecljs

(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

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
sourceraw docstring

boxcljs

(box &
     {:keys [size width height min-width min-height max-width max-height justify
             align align-self margin padding child class style attr]
      :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

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
sourceraw docstring

buttoncljs

(button)

Returns the markup for a basic button

Returns the markup for a basic button
sourceraw docstring

checkboxcljs

(checkbox &
          {:keys [model on-change label disabled? label-class label-style class
                  style attr]
           :as args})

I return the markup for a checkbox, with an optional RHS label

I return the markup for a checkbox, with an optional RHS label
sourceraw docstring

close-buttoncljs

(close-button)
source

css-joincljs

(css-join & args)
source

deep-mergecljs

(deep-merge & vals)

Recursively merges maps. If vals are not maps, the last value wins.

Recursively merges maps. If vals are not maps, the last value wins.
sourceraw docstring

deref-or-valuecljs

(deref-or-value val-or-atom)

Takes a value or an atom If it's a value, returns it If it's a Reagent object that supports IDeref, returns the value inside it by derefing

Takes a value or an atom
If it's a value, returns it
If it's a Reagent object that supports IDeref, returns the value inside it by derefing
sourceraw docstring

deref-or-value-peekcljs

(deref-or-value-peek val-or-atom)

Takes a value or an atom If it's a value, returns it If it's a Reagent object that supports IDeref, returns the value inside it, but WITHOUT derefing The arg validation code uses this, since calling deref-or-value adds this arg to the watched ratom list for the component in question, which in turn can cause different rendering behaviour between dev (where we validate) and prod (where we don't). This was experienced in popover-content-wrapper with the position-injected atom which was not derefed there, however the dev-only validation caused it to be derefed, modifying its render behaviour and causing mayhem and madness for the developer. See below that different Reagent types have different ways of retrieving the value without causing capture, although in the case of Track, we just deref it as there is no peek or state, so hopefully this won't cause issues (surely this is used very rarely).

Takes a value or an atom
If it's a value, returns it
If it's a Reagent object that supports IDeref, returns the value inside it, but WITHOUT derefing
The arg validation code uses this, since calling deref-or-value adds this arg to the watched ratom list for the component
in question, which in turn can cause different rendering behaviour between dev (where we validate) and prod (where we don't).
This was experienced in popover-content-wrapper with the position-injected atom which was not derefed there, however
the dev-only validation caused it to be derefed, modifying its render behaviour and causing mayhem and madness for the developer.
See below that different Reagent types have different ways of retrieving the value without causing capture, although in the case of
Track, we just deref it as there is no peek or state, so hopefully this won't cause issues (surely this is used very rarely).
sourceraw docstring

flex-child-stylecljs

(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
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
sourceraw docstring

flex-flow-stylecljs

(flex-flow-style flex-flow)

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

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

gap-fcljs

(gap-f & {: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

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

h-boxcljs

(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

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
sourceraw docstring

handler-fnclj/smacro

(handler-fn & body)
source

(hyperlink)

Renders an underlined text hyperlink component. This is very similar to the button component above but styled to looks like a hyperlink. Useful for providing button functionality for less important functions, e.g. Cancel

Renders an underlined text hyperlink component.
This is very similar to the button component above but styled to looks like a hyperlink.
Useful for providing button functionality for less important functions, e.g. Cancel
sourceraw docstring

(hyperlink-href)

Renders an underlined text hyperlink component. This is very similar to the button component above but styled to looks like a hyperlink. Useful for providing button functionality for less important functions, e.g. Cancel

Renders an underlined text hyperlink component.
This is very similar to the button component above but styled to looks like a hyperlink.
Useful for providing button functionality for less important functions, e.g. Cancel
sourceraw docstring

input-textcljs

(input-text & args)
source

justify-stylecljs

(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

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
sourceraw docstring

labelcljs

(label & {:keys [label on-click width class style attr] :as args})

Returns markup for a basic label

Returns markup for a basic label
sourceraw docstring

linecljs

(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

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
sourceraw docstring

(link {:keys [label href]})
source

pcljs

(p & children)

acts like [:p ] Creates a paragraph of body text, expected to have a font-szie of 14px or 15px, which should have limited width. Why limited text width? See http://baymard.com/blog/line-length-readability The actual font-size is inherited. At 14px, 450px will yield between 69 and 73 chars. At 15px, 450px will yield about 66 to 70 chars. So we're at the upper end of the prefered 50 to 75 char range. If the first child is a map, it is interpreted as a map of styles / attributes.

acts like [:p ]
Creates a paragraph of body text, expected to have a font-szie of 14px or 15px,
which should have limited width.
Why limited text width?  See http://baymard.com/blog/line-length-readability
The actual font-size is inherited.
At 14px, 450px will yield between 69 and 73 chars.
At 15px, 450px will yield about 66 to 70 chars.
So we're at the upper end of the prefered 50 to 75 char range.
If the first child is a map, it is interpreted as a map of styles / attributes.
sourceraw docstring

pxcljs

(px val & negative)

takes a number (and optional :negative keyword to indicate a negative value) and returns that number as a string with 'px' at the end

takes a number (and optional :negative keyword to indicate a negative value) and returns that number as a string with 'px' at the end
sourceraw docstring

re-com-csscljs

source

scroll-stylecljs

(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

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
sourceraw docstring

v-boxcljs

(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

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
sourceraw docstring

cljdoc is a website building & hosting documentation for Clojure/Script libraries

× close