Search

User Manual

GETTING STARTED


MODULES AND PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


GLOSSARY


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

ALL MANUAL VERSIONS

Ignition 8.1
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata


The Breakpoint container consists of a single breakpoint, with two child views. In other words, using a Breakpoint container offers you a layout with the opportunity to create two different views that are shown at two distinct ranges of layout widths. 

The breakpoint is configured by selecting the Small and Large breakpoints at the top of the Perspective Property Editor, then dragging in a subview, container, or component. However, little additional structure is provided; each of the two breakpoint configurations expects a single component, container, or view.

On this page ...

IULocgo


Breakpoint Container


Flexibility without Limits

The breakpoint layout is the most comprehensive choice when you want to develop a project that works for sessions of many shapes and sizes. Unlike column and flex layouts, which offer ways of controlling how a fixed set of components respond to changes in screen size, a breakpoint layout expects two entirely distinct subviews. This makes the breakpoint layout a powerful, but more involved choice of layout.

There are many circumstances that call for this layer of abstraction. Maybe operators using mobile phones need different control options than desktop computers at a coordinating hub. Or more fundamentally, maybe you can't quite pack as much functionality per view into a mobile screen as you can in its desktop counterpart, and need to add a couple more views to your mobile version to bridge the gap. 

A breakpoint layout might be a good idea if you want small and large versions of your session to have:

  • Differing components
  • Differing properties, bindings, or layout behavior
  • Differing navigation options

When designing pages for mobile and desktop applications, it's important to consider not only the type of layout, but if your design fits nicely on a page in a mobile session. Some pages may work for a desktop session, but may not work for a mobile device such as expecting a user to enter data into multiple tables on a mobile session that don't fit seamlessly across a page.


Breakpoint Position and Root Properties

Position Properties

Position properties in a Breakpoint container indicate simply whether the component is in the large version of the container or the small version. For more information, see Perspective - Breakpoint Container.

Position Property

Description

Data Type

sizeIndicates small or large.boolean

Root Properties

Root properties are accessed by selecting the root folder for a Breakpoint View on the Project Browser tree.

Root Property

Description

Data Type

breakpointWidth (in pixels) breakpoint declarations for child layouts. When the container is sized below minWidth, child position rules will fall back to the next set breakpoint rules.value: numeric
styleSets a style for this view. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object


Configuring a Breakpoint Container

A Breakpoint container can switch between two configurations based on how wide the container is. Here is a simple example of creating a Breakpoint layout using two different views. The components on each view are laid out a little differently because they both represent two different distinct ranges of layout widths: small and large. We are going to use the two views below to add as children to our Breakpoint container. Since you can only add a single component to each child in a Breakpoint container, we'll place each of these views, containing multiple components, in their own Embedded View. This example assumes you have a small view and large view already configured.



  1. Create a new view using a Breakpoint container.



  2. Let's configure the Breakpoint container to show the small view when the screen size is narrow, like on your mobile device, and the large view when you're on your desktop. 

  3. In the Property Editor, the breakpoint is determined by using the Small and Large properties, or the slider at the top of the Designer workspace. In this example, the Breakpoint is set at 800 px. When the Breakpoint container is sized below minimum width, child position rules will fall back to the next set breakpoint rules.
    1. With the Breakpoint container open, click on the Small property in the Property Editor.
    2. Drag an Embedded View component onto the Breakpoint container.
    3. Select the EmbeddedView in the Project Browser.
    4. Set the path property to the name of your small view (i.e., Sml View) from the dropdown.
    5. Set the Position size property to small. Note: This lets the embedded view component know which child rule it is linked to, Small or Large.



  4. Now let's repeat the steps above for the large view.
    1. With the Breakpoint container open, click on the Large property in the Property Editor.
    2. Drag an Embedded View component onto the Breakpoint container.
    3. Select the first EmbeddedView_0 in the Project Browser.
    4. Set the path property to the name of your large view (i,e., Big View) from the dropdown.
    5. Set the Position size property to large.  Note: This lets the embedded view component know which child rule it is linked to, Small or Large.

  5. Now, when you toggle the Small and Large properties in the Property Editor, you'll see the window switch between the two different Small and Large views.




  6. Now, let's open a Perspective Session by clicking on the Page Configuration  icon at the bottom of the Designer window to test your Breakpoint layout.
  7. Right click on your Breakpoint container (i.e., bpview), and click on Launch Url.



  8. With your Perspective Session open, stretch and shrink your browser window. You'll see the views change depending on the width of your browser. 




  • No labels