Follow

Panel

The Panel control is a container that can hold any controls and provides a common style for the group of controls.

Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).

This section is most commonly used to organize other controls that reside inside of it.

Appearance

Icon* Allows you to type an icon by name from Font Awesome

Color Style

Light Color  Sets the fill color to a lighter shade, and changes title text to color selected in color style

Full Body Color Fills the body with color when selected, instead of just the header

Width in px, %, em; For example: 50px, 20%, 0.4em. If no unit is specified, px is assumed

Body Height Height in px, %, em; For example: 50px, 20%, 0.4em. If no unit is specified, px is assumed

* You can use icons for the labels. There are a variety of icons offered at Font Awesome

Example

These are the configuration option settings...

This is the result...

Footer

Footer Text  Allows you to input a footer into the panel.  Just type in what you want the footer to read in the text box.

Example

These are the configuration option settings...

 

This is the result...

 

Events

With the Panel section, there are 2 types of event handlers:

  • On Load When the page loads
  • On Icon Click When the Panel Icon is Clicked

You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.

Methods

For detailed information on the available methods for this control, access the JS Doc file.

Related Article(s)

SPARK Layout Capabilities

Panel Header & Footer

 

  • Author: Dan Abresch
  • Date Created: June 8, 2015
  • Date Modified: July 27, 2015
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments