Custom Widget for Wakanda
The LeftRight widget is a simple composed widget.
Properties
This widget has the following properties:
- width: The width of the container
- height: The height of your container
Goals
The LeftRight will create a custom widget divided in 2 parts, left and right.
The size, shape and color of the parts are defined in the CSS
widget.js
After inheriting from the composed behavior, we create 2 simple widgets with just a < div > : var simple1 = widget.create('simple1');
Then we associate each simple widget with a part : HeaderContentFooter.setPart('left', simple1);
Then we create an internal event to change the color of the content when the widget is clicked.
Wakanda Studio
Just drag the widget to your page. A colorfull widget should be displayed. If you click in the widget, the left panel will change colors. You can also resize the widget.
CSS
The LeftRight CSS will define all the 2 areas: left and right You can adjust its color by changing directly in the Studio OR by changing the /css/widget.css file.
More Information
For more information on how to install a custom widget, refer to Installing a Custom Widget.
For more information about Custom Widgets, refer to Custom Widgets in the Architecture of Wakanda Applications manual.