TextBlock style change on foreign event
Available in Html5 Renderer version 1.0.5.11+ and Designer 1.0.11.134+
TextBlock can be linked by another element's ID (Name property). It is possible to change the whole TextBlock style on an event of the foreign element inside the form.
1) Place Text Block (with Border) inside the form.
Please note that classic TextBlock cannot be linked.
2) Fill LabelFor property with correct element ID
3) Initialize style change on desired events like the code below.
The renderer will change the style of the corresponding label automatically, If the label exists.
eForms.LabelFor.OnFocus({color:'#0000FF', transition:0.2});
eForms.LabelFor.OnUnFocus({color:'#000000'});
When the desired element will be focused than the color of the corresponding label will be changed to blue with fast transition effect of 0.2 seconds.
4) and It's DONE!
Supported events:
- OnFocus (ie. eForms.LabelFor.OnFocus(options))
- OnUnfocus (ie. eForms.LabelFor.OnUnfocus (options))
- OnMouseEnter (ie. eForms.LabelFor.OnMouseEnter (options))
- OnMouseLeave (ie. eForms.LabelFor.OnMouseLeave (options))
- OnValidation (ie. eForms.LabelFor.OnValidation (options)) - this event will be called when element will be invalidated
Available options:
Options are designed like javascript style object.
- color
- fontSize
- fontFamily
- fontWeignt
- top
- left
- padding (in format "x,x,x,x")
- transition (transitions all changed values by selected amount of time)
Result of the sample code above:
Before focus state:
After focus state with transition delay:
and returned back on unfocus event without transition (because it was not set):