The Vertical Layout control is used to hold content inside it vertically (stacked on-top of one another).Note that this control can be bound to a list which then becomes a repeating section.
The Vertical Layout along with the Horizontal Layout are among the most common controls used for designing a user interface.
Vertical Layouts are also capable of repeating list objects providing them capability similar to tables.
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).
Appearance
Layout Flow Horizontal/vertical layout of child controls; Vertical, Vertical Tight, Horizontal, Horizontal Inline Scroll, Horizontal Tight, Horizontal Auto-wrap
Horizontal Alignment Horizontal alignment of child controls; Justified, Left, Center, Right
Child Width(s) Width of child controls in either "px" or "%" or "em" (px assumed)
Vertical Alignment Controls the vertical alignment of the elements displayed in the layout. Only applies to horizontal layout flows.
Width Width in px, %, em; for example: 50px, 20%, 0.4em. If no unit is specified, px is assumed
Height Height in px, %, em; for example: 50px, 20%, 0.4em. If no unit is specified, px is assumed
Responsive
Sensor (Optional) Id of the Responsive Sensor control containing this Layout. If omitted, the nearest sensor in the parent chain is used.
Behaviors Can adjust the settings for the Box Factors set within your Responsive Sensor.
Performance
Async Loading Provides a better UI experience for large data sets (at the expense of slower overall row-loading time once the section starts loading). Only used if this section is bound to a list.
Async Batch Size Defines how many rows are loaded synchronously in an asynchronous batch. This can help tune/optimize synchronous vs. asynchronous loading performance. Only used if this section is bound to a list.
Example
These are the configuration options settings...
This is the result...
Note: Inside the Vertical Layout are three Panels all set to a width of 350px.
Events
With the Switch control, there are 2 types of event handlers:
- On Load When the page loads
- On Responsive Update When the section responsively sizes
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)
- Author: Elliot Pytosky
- Date Created: June 8, 2015
- Date Modified: July 27, 2015
Comments