These are the layouts that ship with hcj.js. All are properties of the window.hcj.component object.
AlignHorizontal
• nbsp;alignHorizontal
nbsp;:: nbsp;
{l: Component?, r: Component?, m: Component?} - gt; Component
• nbsp;alignHLeft nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp;:: nbsp;
Style
• nbsp;alignHRight nbsp; nbsp; nbsp; nbsp;
nbsp;:: nbsp;
Style
• nbsp;alignHMiddle nbsp; nbsp; nbsp;
nbsp;:: nbsp;
Style
Takes an object with optional l, r, and m properties. Aligns elements left, right, and middle.
alignH and alignLRM are both aliases for alignHorizontal.
Example:
var nbsp;logo nbsp;= nbsp;hcj.component.image({src: nbsp;'logo.png'});
var nbsp;menu nbsp;= nbsp;hcj.component.text('menu');
nbsp;
var nbsp;header nbsp;= nbsp;hcj.component.alignH({
nbsp; nbsp;l: nbsp;logo,
nbsp; nbsp;r: nbsp;menu,
});
AlignVertical
• nbsp;alignVertical
nbsp;:: nbsp;
{t: Component?, b: Component?, m: Component?} - gt; Component
• nbsp;alignVTop nbsp; nbsp; nbsp; nbsp;
nbsp;:: nbsp;
Style
• nbsp;alignVBottom nbsp;
nbsp;:: nbsp;
Style
• nbsp;alignVMiddle nbsp;
nbsp;:: nbsp;
Style
Takes an object with optional t, b, and m properties. Aligns elements top, bottom, and middle.
alignV and alignTBM are both aliases for alignVertical.
Example:
var nbsp;logo nbsp;= nbsp;hcj.component.image({src: nbsp;'logo.png'});
var nbsp;menu nbsp;= nbsp;hcj.component.text('menu');
nbsp;
var nbsp;header nbsp;= nbsp;hcj.component.alignV({
nbsp; nbsp;t: nbsp;logo,
nbsp; nbsp;b: nbsp;menu,
});
BasicFloat
basicFloat :: (BasicFloatConfig? ; Component , [Component]) - gt; Component
Takes a single component to "float", and an array of components to display around it.
A BasicFloatConfig is an object with the following properties:
• nbsp;padding nbsp; nbsp; nbsp; nbsp; nbsp; :: Number?
nbsp; nbsp;
Padding amount between components. Padding is also applied around the outsides of the stacked components, but not around the outside of the floating component.
• nbsp;clearHanging :: Bool? nbsp; nbsp;
nbsp; nbsp;
If set, then the first component that extends below the floating component will be "cleared", i.e. placed entirely below the floating component.
• nbsp;float nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: String?
nbsp; nbsp;
If set to "right" floating component floats right, if "left" floating component floats left. Default is "left".
ComponentStream
componentStream :: Stream Component - gt; Component
Takes an hcj stream of components and displays latest one in the stream.
Example:
var nbsp;componentS nbsp;= nbsp;hcj.stream.map(hcj.viewport.widthS, nbsp;function nbsp;(windowWidth) nbsp;{
nbsp; nbsp;return nbsp;hcj.component.text('' nbsp;+ nbsp;windowWidth);
};
var nbsp;windowWidth nbsp;= nbsp;componentStream(componentS);
Grid
grid :: (GridConfig? ; [Component]) - gt; Component
Responsive grid layout. Components are placed into rows.
A GridConfig is an object with the following properties:
• nbsp;padding nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: Number? nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Padding amount between components.
• nbsp;surplusWidth nbsp; :: SurplusWidthFunc? nbsp;
nbsp; nbsp;
Splits any surplus width among components in each row; see sideBySide.
• nbsp;surplusHeight :: SurplusHeightFunc?
nbsp; nbsp;
Splits surplus height among grid rows; see stack.
• nbsp;useFullWidth nbsp; :: Bool? nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
If set, the grid's minimum width is computued as the sum of the minimum widths of the child components, rather than as the largest of the minimum widths of the child components.
• nbsp;bottomToTop nbsp; nbsp; :: Bool? nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
If set, grid rows are arranged in reverse order: they stack upward instead of downward.
• nbsp;maxPerRow nbsp; nbsp; nbsp; nbsp; :: Number? nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Max components per row.
• nbsp;rowOrColumn nbsp; nbsp; :: Bool? nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
If set, grid elements will always be arranged in either a single row if they fit horizontally, or a single column if they do not.
LargestWidthThatFits
largestWidthThatFits :: [Component] - gt; Component
Chooses the largest-width component that fits, among the components passed in.
The minimum width of this component is the smallest of the minimum widths of its children, and the minimum height is of the largest component that fits the given width.
Overlays
overlays :: [Component] - gt; Component
Places components directly on top of one another.
The minimum width and minimum height of the overlay are the max of the minimum widths and minimum heights of its children.
PromiseComponent
promiseComponent :: (Promise Component , Component?) - gt; Component
Takes a promise that resolves to a component, and an optional initial component. Displays the initial component until the promise resolves, then switches to the resolved component.
SideBySide
sideBySide :: (SideBySideConfig ; [Component]) - gt; Component
Places components directly side by side.
The minimum width of a sideBySide is the sum of the minimum widths of its children, plus any padding. Its minimum height is the max of the minimum heights of its children at their respective minimum widths.
A SideBySideConfig may have the following properties:
• nbsp;padding nbsp; nbsp; nbsp; nbsp; nbsp; :: Number? nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Padding amount between components.
• nbsp;surplusWidth :: SurplusWidthFunc?
nbsp; nbsp;
Distribute surplus width among the instances.
SurplusWidthFunc
type SurplusWidthFunc = (Number , [[{left: Number, width: Number}]]) - gt; [[{left: Number, width: Number}]]
Whenever the width of a row is greater than its minimum width, it has surplus width. A SurplusWidthFunc takes two parameters: the total width available, and an array of "rows" - each an array of "columns". (The sideBySide layout always passes in exactly one "row", but other layouts may pass in more.) Each column is an object with left and width properties giving the initial left position and width of the column. The function returns an array of rows (possibly by mutating the input array) giving each column new left and width values.
HCJ comes with a number of SurplusWidthFuncs for you to use. These are all members of the window.hcj.funcs.surplusWidth object:
• nbsp;ignore nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: SurplusWidthFunc nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Returns input columns.
• nbsp;center nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: SurplusWidthFunc nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Centers columns horizontally.
• nbsp;evenSplit nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: SurplusWidthFunc nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Evenly splits each row's surplus width among its columns, increasing their widths each by the same amount.
• nbsp;justify nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: SurplusWidthFunc nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Repositions each row's columns so that they are evenly spaced, but does not increase their widths.
• nbsp;giveToNth nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: Number - gt; SurplusWidthFunc
nbsp; nbsp;
Gives all surplus width to the nth column of each row.
• nbsp;centerLargestRowThenAlignLeft :: SurplusWidthFunc nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Centers the largest row. All other rows are left-aligned to it.
Note that unlike a SurplusHeightFunc, which only operates on a single column of elements, a SurplusWidthFunc operates on multiple rows at once.
Stack
stack :: (StackConfig? ; [Component]) - gt; Component
Positions components one on top of another. The minimum width of a stack is the max of the minimum widths of its children. The minimum height of a stack is the sum of the minimum heights of its children.
A StackConfig is an object with the following properties:
• nbsp;padding nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: Number? nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Padding amount between components.
• nbsp;surplusHeight :: SurplusHeightFunc?
nbsp; nbsp;
Distribute surplus height among the stacked items.
SurplusHeightFunc
Whenever the height given to a column of components is greater than the sum of their minimum heights, the column has surplus height. A SurplusHeightFunc takes two parameters: the total height available, and an array of "rows", each an object with a top and a height property initialized with its top position and height. It returns an array of rows (possibly by mutating the input array) giving new top and height values for each row.
type SurplusHeightFunc = (Number , [{top: Number, height: Number}]) - gt; [{top: Number, height: Number}]
HCJ comes with a small number of SurplusHeightFuncs for you to use. These are all members of the window.hcj.funcs.surplusHeight object:
• nbsp;ignore nbsp; nbsp; nbsp; :: SurplusHeightFunc nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Returns input column.
• nbsp;center nbsp; nbsp; nbsp; :: SurplusHeightFunc nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Centers rows vertically.
• nbsp;evenSplit :: SurplusHeightFunc nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Evenly splits surplus height among rows.
• nbsp;giveToNth :: Number - gt; SurplusHeightFunc
nbsp; nbsp;
Gives all surplus height to the nth row.
