While the layouts in the previous section place multiple components together in various arrangements, the styles in this section apply to a single component, generally glitzing it up.
These styles are all properties of the window.hcj.component object.
Again, a style is a function that takes one component and returns a component, so the type Style is equivalent to the type Component - gt; Component.
All
all :: [Style] - gt; Style
The hcj.component.all function performs function composition. It applies multiple styles, one after another.
Example:
var nbsp;title nbsp;= nbsp;all([
nbsp; nbsp;margin({
nbsp; nbsp; nbsp; nbsp;all: nbsp;10,
nbsp; nbsp;}),
nbsp; nbsp;border(color.white, nbsp;{
nbsp; nbsp; nbsp; nbsp;all: nbsp;1,
nbsp; nbsp;}),
])(text('Title'));
And
and :: ((Instance , Context) - gt; ()) - gt; Style
The hcj.component.and style lets you arbitrarily operate on an instance and read from its context. It takes a function that takes an instance and a context, and returns a style. This function may modify or re-assign any properties of the instance object.
Example:
var nbsp;turnBlue nbsp;= nbsp;and(function nbsp;(i) nbsp;{
nbsp; nbsp;i.el.style.backgroundColor nbsp;= nbsp;'blue';
});
BackgroundColor
backgroundColor :: (BackgroundColorConfig | Stream BackgroundColorConfig) - gt; Style
Applies background and font colors to a component.
A BackgroundColorConfig is an object with the following properties:
• nbsp;background nbsp; nbsp; nbsp; nbsp; nbsp; :: Color?
nbsp; nbsp;
Background color.
• nbsp;font nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: Color?
nbsp; nbsp;
Font color.
• nbsp;backgroundHover :: Color?
nbsp; nbsp;
Background color on hover.
• nbsp;fontHover nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: Color?
nbsp; nbsp;
Font color on hover.
Border
border :: (Color , BorderConfig) - gt; Style
Adds a colored border around a component.
A BorderConfig is an object with the following properties:
• nbsp;all nbsp; nbsp; nbsp; :: Number?
nbsp; nbsp;
Border size on all sides.
• nbsp;top nbsp; nbsp; nbsp; :: Number?
nbsp; nbsp;
Border size on top side.
• nbsp;bottom :: Number?
nbsp; nbsp;
Border size on bottom side.
• nbsp;left nbsp; nbsp; :: Number?
nbsp; nbsp;
Border size on left side.
• nbsp;right nbsp; :: Number?
nbsp; nbsp;
Border size on right side.
• nbsp;radius :: Number?
nbsp; nbsp;
Border radius.
Crop
Crops a component down to a proportion of its size.
crop :: CropConfig - gt; Style
A CropConfig is an object with the following properties:
• nbsp;all nbsp; nbsp; nbsp; :: Number?
nbsp; nbsp;
Crop proportion on all sides.
• nbsp;top nbsp; nbsp; nbsp; :: Number?
nbsp; nbsp;
Crop proportion on top side.
• nbsp;bottom :: Number?
nbsp; nbsp;
Crop proportion on bottom side.
• nbsp;left nbsp; nbsp; :: Number?
nbsp; nbsp;
Crop proportion on left side.
• nbsp;right nbsp; :: Number?
nbsp; nbsp;
Crop proportion on right side.
KeepAspectRatio
keepAspectRatio :: (KeepAspectRatioConfig? ; Component) - gt; Component
Actively protects the aspect ratio of a component. Aspect ratio is defined as the component's minimum width divided by its minimum height at its minimum width. Component can cover the entire display area, or be contained within the display area.
A KeepAspectRatioConfig may have any of the following properties:
• nbsp;fill nbsp; nbsp; :: Bool?
nbsp; nbsp;
If set, the child component covers the display area, and is cropped if necessary. If false or not set, component is contained within the display area.
• nbsp;top nbsp; nbsp; nbsp; :: Bool?
nbsp; nbsp;
If set, child component's top is aligned with the top of the display area.
• nbsp;bottom :: Bool?
nbsp; nbsp;
If set, child component's bottom is aligned with the bottom of the display area.
• nbsp;left nbsp; nbsp; :: Bool?
nbsp; nbsp;
If set, child component's left side is aligned with the left side of the display area.
• nbsp;right nbsp; :: Bool?
nbsp; nbsp;
If set, child component's right side is aligned with the right side of the display area.
Link
link :: Style
Sets the pointer: cursor CSS style.
LinkTo
linkTo :: LinkToConfig - gt; Style
Wraps component it in an a tag with the given href.
A LinkToConfig is an object with the following properties:
• nbsp;href nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: String nbsp;
nbsp; nbsp;
Link href.
• nbsp;target nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; :: String?
nbsp; nbsp;
Link target.
• nbsp;defaultStyle :: Bool? nbsp; nbsp;
nbsp; nbsp;
If set, uses browser's default color and text decoration for the link instead of leaving the link completely unstyled.
MakeSticky
makeSticky :: (Number | Stream Number)? - gt; Style
Causes a component to stick to the top of the screen instead of scrolling off.
A number, or a stream of numbers, can be optionally passed in before applying makeSticky to a component. The component will then become sticky before it scrolls off the screen, at a distance from the top of the screen equal to the number you pass in. (This can be useful for layering sticky items on top of one another, by passing the context height of the first into the makeSticky style of the second.)
Margin
• nbsp;margin
nbsp;:: nbsp;
MarginConfig - gt; Style
Adds some space around a component.
padding is an alias for margin.
A MarginConfig is an object with the following properties:
• nbsp;all nbsp; nbsp; nbsp; :: Number?
nbsp; nbsp;
Margin to apply to all sides.
• nbsp;top nbsp; nbsp; nbsp; :: Number?
nbsp; nbsp;
Margin to apply to top side.
• nbsp;bottom :: Number?
nbsp; nbsp;
Margin to apply to bottom side.
• nbsp;left nbsp; nbsp; :: Number?
nbsp; nbsp;
Margin to apply to left side.
• nbsp;right nbsp; :: Number?
nbsp; nbsp;
Margin to apply to right side.
MinHeight
• nbsp;minHeight nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp;:: nbsp;
(Number - gt; Number) - gt; Style
• nbsp;minHeightAtLeast
nbsp;:: nbsp;
(Number | Stream Number) - gt; Style
Overrides the minimum height of a component.
The minHeight function takes a minimum height function and sets the component's minimum height to that function.
The minHeightAtLeast function takes a number or a stream of numbers and ensures that the minimum height of a component is at least that amount.
MinWidth
• nbsp;minWidth nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp;:: nbsp;
Number - gt; Style
• nbsp;minWidthAtLeast
nbsp;:: nbsp;
(Number | Stream Number) - gt; Style
minWidth :: MinWidth - gt; Style
minWidthAtLeast :: (Number | Stream Number) - gt; Style
Overrides the minimum width of a component.
The minWidth function takes a number and sets the minimum width of the instance to be that number.
The minWidthAtLeast function takes a number or a stream of numbers, and sets the minimum width of a component to be at least that amount.
OnThis
Signs up an event handler.
• nbsp;onThis nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;
nbsp;:: nbsp;
String - gt; (Event - gt; ()) - gt; Style
• nbsp;changeThis nbsp; nbsp; nbsp;
nbsp;:: nbsp;
(Event - gt; ()) - gt; Style
• nbsp;clickThis nbsp; nbsp; nbsp; nbsp;
nbsp;:: nbsp;
(Event - gt; ()) - gt; Style
• nbsp;keydownThis nbsp; nbsp;
nbsp;:: nbsp;
(Event - gt; ()) - gt; Style
• nbsp;keyupThis nbsp; nbsp; nbsp; nbsp;
nbsp;:: nbsp;
(Event - gt; ()) - gt; Style
• nbsp;mousedownThis
nbsp;:: nbsp;
(Event - gt; ()) - gt; Style
• nbsp;mousemoveThis
nbsp;:: nbsp;
(Event - gt; ()) - gt; Style
• nbsp;mouseoverThis
nbsp;:: nbsp;
(Event - gt; ()) - gt; Style
• nbsp;mouseoutThis nbsp;
nbsp;:: nbsp;
(Event - gt; ()) - gt; Style
• nbsp;mouseupThis nbsp; nbsp;
nbsp;:: nbsp;
(Event - gt; ()) - gt; Style
changeThis is defined as onThis("change"), and so on.
OverflowHorizontal
overflowHorizontal :: OverflowHorizontalConfig - gt; Style
Displays a horizontal scrollbar beneath a component, if its width is less than its minimum width. Overrides the component's minimum width.
• nbsp;minWidth :: Number
nbsp; nbsp;
Minimum width of the overflowHorizontal component.
ToggleHeight
toggleHeight :: Stream Bool - gt; Style
Toggles the minimum height of a component. Its own height is used if the stream contains true, and 0 is used if the stream contains false.
