/HeaderContentFooter

A simple composed widget with 3 parts

Primary LanguageJavaScript

Custom Widget for Wakanda

The HeaderContentFooter widget allows you to create a composed widget.

Properties

This widget has the following properties:

  • width: The width of the container
  • height: The height of your container

Goals

The HeaderContentFooter will create a custom widget divided in 3 parts: a header, a content and a footer.

The size, shape and color of the parts are defined in the CSS

widget.js

After inheriting from the composed behavior, we create 3 simple widgets with just a < div > : var simple1 = widget.create('simple1');

Then we associate each simple widget with a part : HeaderContentFooter.setPart('header', simple1);

Then we create an internal event to change the color of the content when the widget is clicked.

CSS

The HeaderContentFooter CSS will define all the 3 areas: content, header and footer 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.