These are the basic components that ship with hcj.js.
Each of these is a property of window.hcj.component.
There is a Haskell-esque "type signature" below each, showing the parameters that each function can take, followed by a description. This "type signature" borrows syntax from Haskell and C#, and uses some new shorthand specifically for Javascript. The function arrow - gt; is borrowed from Haskell; a - gt; b is a function taking a parameter of type a and returning type b. Additionally, (a , b) - gt; c denotes a two-argument function, while (a ; b) - gt; c denotes a two-argument function that can be curried, i.e. f :: (a ; b) - gt; c can be called either as f(x, y) or as f(x)(y). The type a?, is shorthand for Maybe a, denoting "Either an a or the value undefined". And a | b denotes a variable that can have type a or type b.
Text
text :: (TextConfig? ; SpanConfig | [SpanConfig]) - gt; Component
The text function can take one or two arguments: an optional TextConfig, followed by either a single SpanConfig or an array of SpanConfigs. It returns a Component.
By default, a text component has a minimum width of 300px, and its minimum height is computed by measuring the height of the element. These can be changed by passing in a TextConfig object.
The TextConfig object applies globally to all spans within the text component. It can have the same properties as a SpanConfig, minus str, plus some additional properties:
• nbsp;align nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: String?
• nbsp;minWidth nbsp; nbsp; nbsp; nbsp; :: Number?
nbsp; nbsp;
Specifies the minimum width of the text component, overriding 300px default.
• nbsp;measureWidth :: Bool? nbsp; nbsp;
nbsp; nbsp;
If set, the text element is measured and its measurement becomes its minimum width, overriding 300px default.
• nbsp;minHeight nbsp; nbsp; nbsp; :: Number?
nbsp; nbsp;
Specifies the minimum height of the text component as a constant number, overriding measureHeight default.
• nbsp;oneLine nbsp; nbsp; nbsp; nbsp; nbsp; :: Bool? nbsp; nbsp;
nbsp; nbsp;
Declares that the text component is always one line tall. Its minimum height is calculated from its font size and line height, overriding measureHeight default.
A SpanConfig may be either a String, an object with the following properties:
• nbsp;str nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: String nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
The text to show.
• nbsp;size nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: String? nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
• nbsp;style nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: String? nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
• nbsp;weight nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: String? nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
• nbsp;family nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: String? nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
• nbsp;color nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: Color? nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Font color (as an HCJ color).
• nbsp;shadow nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: String? nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
• nbsp;spanCSS nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: [{name: String, value: String}]?
nbsp; nbsp;
Array of objects with name and value properties. Additional CSS styles to apply to the text span.
• nbsp;lineHeight nbsp; nbsp; nbsp; :: Number? nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Line height of the text span.
• nbsp;verticalAlign :: String? nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp; nbsp;
Vertical align of the text span.
Examples:
Hello
hello
BOLD_MONO
Image
image :: ImageConfig - gt; Component
Creates an image component. By default, an image's minimum width is its native width, and its minimum height at all widths is its native height.
An ImageConfig object has the following properties:
• nbsp;src nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: String nbsp;
• nbsp;alt nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: String?
• nbsp;minWidth nbsp; :: Number?
nbsp; nbsp;
If present, minimum width is set to this number instead of the image's natural width.
• nbsp;minHeight :: Number?
nbsp; nbsp;
If present, minimum width of image is set to the quotient of this number and the image's aspect ratio.
Note: When an image is placed into a context whose proportions are not the image's aspect ratio, it will stretch. The most common solution is to wrap images with the hcj.component.keepAspectRatio layout.
BarH, BarV, and Rectangle
• nbsp;barH nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp;:: nbsp;
Number - gt; Component
• nbsp;barV nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp;:: nbsp;
Number - gt; Component
• nbsp;rectangle
nbsp;:: nbsp;
{[h, x]: Number, [v, y]: Number} - gt; Component
barH and barV create horizontal and vertical separators of the size you specify. rectangle takes an object with h and v or x and y properties, and creates a rectangle of that size.
Empty
• nbsp;empty nbsp; nbsp;
nbsp;:: nbsp;
String - gt; Component
The empty function takes a tag name and returns a component with zero width and zero height using that tag name.
nothing is defined as empty("div").
