Behavior Styles
Hierarchy
- Behavior
- Styles
Index
Constructors
constructor
To initialize a behavior its dependecies have to be injected first,then the binding to its value has to be processed and finally thedefined bindings have to be set up.
This has to be done for all definitions along the prototype chain to makesure inherited features don't break.
Parameters
value: string
The actual string literal of the attribute used for the current behavior instance.
Returns Styles
Properties
element
The element the behavior was attached to.
Static bindings
This static property lets you define listeners that will be executed whenproperties of the behavior change.
It should be a map where the keys are paths that should be watched on the behavior instanceand the values are names of methods that will be invoked on it when the valueat a path changes.
Example
The following example shows a behavior that reacts to a change in the height ofthe defining element.
export default class MyBehavior extends Behavior { static inject: {element: Element}; static bindings = { 'element.clientHeight': 'heightChange' }; width: number; heightChange(height: number) { this.width = height * 2; }}Static update
Methods
remove
Returns void
update
Updates the styles of the element.
Parameters
styles: Object
Returns void
The Styles behavior can be used to dynamically add CSS styles to anelement. The value should be an expression that results to an objectwhere the keys are the relevant CSS property names and their valuesany valid Expression that results to the desired value.
Example
This simple example sets the color of an h1 element to the value oftextColor which is looked up in the local scope.
<h1 styles="{color: textColor}">Mahalo</h1>{ default } from mahalo/behaviors/styles