Panel

Derived from Element

A simple container with no special behavior other than it can be styled and the mechanism used to position the children can be customized. In HTML terms, it's a <div>.

{
	/*
	 * All attributes of Element apply here
	 */

	"type":  "panel",
	
	/*
	 * A panel may have styling to control how it's children are
	 * laid out.  This is an example of using the CSS "flex" layout.
	 *
	 * You don't have to specify any layout at all of course.  This
	 * panel's children could use the "position" attribute to explicitly
	 * position themselves.
	 */
	"style": {
		/*
		 * We want the panel to extend the entire width of the screen
		 * and we want it to be 3 "em"s tall.
		 */
		"width": "100%",
		"height": "3em",
		/* 
		 * "flex" and "row-reverse" are standard CSS layout
		 * constructs.  In this example, as child elements are added,
		 * they'll be laid out from right to left.  
		 */
		"display": "flex",
		"flex-direction": "row-reverse"
	},
	
	/*
	 * If you have a large number of elements to display, you can save some
	 * time by defining defaults for them.  For instance, if they were all
	 * buttons of a specific style, you could specify that here.
	 */  
	"element_defaults": {
		"type": "button",
		"style": { "width": "12ch", "height": "2.5em", "margin": "2px" },
		"classes": "btn btn-success"
	},
	
	"element_configs": [
	/*
	 * All of the children for this panel are defined here
	 */
	]
}