Switches are a powerful customizing tool for Web Components generated by WCF.
It is based on a very simple idea: by assigning a value to the attribute named after the swift in the component, a CSS class, which has that value as its name, is added to the element within the component, as shown in the example below:
Beyond “on” and “off”
Switches generated by the Web Component Factory always work for “on” and “off” values of the attribute that names the switch. When generating the component, the factory ensures the necessary CSS classes and values for these two states are added.
But a switch in WCF may receive any valid value to name a CSS class, and the WCF API will assign that class to the specified element within the component if the corresponding attribute value changes.
If the class is not declared, there will certainly be no change, but if a class with that identifier is added using customCSS, it will be applied and the element will be modified according to the corresponding CSS, as seen in the example.
In the component’s customCSS:
.with-border {border: 2px solid #c2c2c2; border-radius: 6px;}
.shrink {width: 30px;}
.grey-all {filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(3332%) hue-rotate(56deg) brightness(113%) contrast(75%);}The outcome:
Switches in subcomponents
When subcomponents with switches are included in a component, besides the possibility of using switches in each subcomponent, the switch can be used in the main component by simply adding the corresponding attribute and value.
Not only does this facilitate and make the handling more usable, but it also allows modifying all subcomponents by assigning just one attribute. Every time modifying one single subcomponent is needed, it can be accessed directly, as shown in the example:
It is worth noting that the combination of using switches in both the component and the subcomponents can produce some conflicts in the assigned classes that need to be carefully handled to ensure the component always displays correctly.
Switch links
Links are one of the most powerful tools of the Web Component Factory ecosystem, as they allow you to easily link the behavior of one component to other components. Linking switches is one of the most frequent cases of use (or use cases).
The example shows a link where, when the switch in subcomponent 1 is set to “on”, subcomponent 2 switches to “off” and subcomponent 3 to “shrink”, and when set to “off”, subcomponent 2 switches to “on” and subcomponent 3 to “with-border”.
This is a very basic example, linking the same switch within different components, but any switch in a component can be linked to any switch in the same component or another one, as well as to custom variants and attributes.
LinkData
let linkData = [{oriAttr:'showicon' , oriValue:'on' , destTagId:'comp-comp3subcomps2.comp-compconswitch_1', destAttr:'showicon', destValue:'off'},
{oriAttr:'showicon' , oriValue:'on' , destTagId:'comp-comp3subcomps2.comp-compconswitch_2', destAttr:'showicon', destValue:'shrink'},
{oriAttr:'showicon' , oriValue:'off' , destTagId:'comp-comp3subcomps2.comp-compconswitch_1', destAttr:'showicon', destValue:'on'},
{oriAttr:'showicon' , oriValue:'off' , destTagId:'comp-comp3subcomps2.comp-compconswitch_2', destAttr:'showicon', destValue:'with-border'}
];
wcf_allInstances.setLinkData('comp-comp3subcomps2.comp-compconswitch', linkData);Subcomponents linked through links:
In summary, switches are a simple and powerful tool for changing the behavior and presentation of a component. Linked through links, they allow generating feature-rich interfaces that respond quickly to user actions.
Leave a Reply