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
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata


General

Component Palette Icon:


 

IULocgo


Flex Container

Description

The Flex Container provides an efficient way to lay out, align, and distribute space among components in the container particularly when their size is unknown or dynamic. The Flex Container can alter a component's width and height to best fill the available space to accommodate all types of devices and screen sizes. It expands components to fill available free space, or shrinks them to prevent overflow.
For more information, see Flex Layouts.

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective.
This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

Props
NameDescriptionProperty Type
directionDirection of the child layout. Options are row, row-reverse, column, column-reverse.value: string dropdown
wrapWhether the container should allow children to wrap to the next line if space has run out. Options are nowrap, wrap, wrap-reverse.value: string dropdown
justifyAdjusts placement of children along the main axis when there is extra space, which may be used to fill areas before, after, or in-between: flex-start, flex-end, center, space-between, space-around, space-evenly.value: string dropdown
alignItemsAdjusts placement of children along the cross axis when there is extra space: flex-start, flex-end, center, baseline, stretch.value: string dropdown
alignContentAdjusts alignment of wrapped content when there is free space in the cross axis: flex-start, flex-end, center, space-between, space-around, stretch.value: string dropdown
styleUse Style and Classes to customize the visual style of the component. The Style menu contains all the tools for modifying text, background, margins, borders, and more. You can also specify a style class.object


Property User Interface

This feature is new in Ignition version 8.0.3
Click here to check out the other new features

When a Flex container is deep selected, there is a Graphical User Interface (GUI) at the top of the Perspective Property Editor that enables you to set the container's properties. Functionality is similar to that of the properties in the Props Tree, but you may find the visual interface easier or quicker to use.

Direction

This sets the direction for the child layout. Options are Row or Column. When the Reverse icon is selected, the contents of this container are displayed in reverse order.

Direction: Row

The following table shows the icons and properties they represent when Direction: Row is selected. The icon that's displayed if Reverse order is selected is also shown.

Left/right/top/bottom notes in the descriptions refer to non-reversed directions.
The phrase "when there is extra space" means when no components have are stretching to fill the space. ie: when no components have "grow" greater than 0.

 Click here to see the Direction: Row icons and properties...


Items
Row IconRow Reversed IconProperty

Description

Flex StartChild items are placed along the start (top) of the container when there is extra space.

CenterChild items are placed along the center of the container when there is extra space.

Flex EndChild items are placed along the end (bottom) of the container when there is extra space.

StretchChild items are stretched from top to bottom of the container.

BaselineChild items are placed so the baseline of the text matches for all of them when there is extra space.
Justify
Row Icon
Row Reversed IconPropertyDescription

Flex startAdjusts placement of children to the start (left) of the container when there is extra space. If reversed, children are placed along the right.

CenterAdjusts placement of children along the center of the container when there is extra space.

Flex EndAdjusts placement of children along the end (right) of the container when there is extra space. If reversed, children are placed along the left.

Space Between

Adjusts placement of children with space in between them reaching to the edges of the container when there is extra space.

Space Around

Adjusts placement of children with even spacing in between them with some space along the edges when there is extra space.


Space EvenlyAdjusts placement of children with even spacing in between them and the edges of the container when there is extra space.
Children
IconPropertyDescription
N/ADon't WrapIf there are more components than the width allows, shrink them.
N/AWrapIf there are more components than the width allows, wrap onto the next line.

Reverse WrapToggle to reverse the direction of wrap from top-down to bottom-up
Content (Only applicable when Children:Wrap is selected.)
Row Icon
Row Reversed IconPropertyDescription

Flex startAdjusts placement of wrapped content to the start (top) of the container when there is free space.

CenterAdjusts placement of wrapped content to the middle of the container when there is free space.

Flex EndAdjusts placement of wrapped content to the end (bottom) of the container when there is free space.

Space BetweenAdjusts placement of wrapped content evenly with space in between each wrapped line, reaching to the edges (top and bottom) of the container when there is extra space.

Space AroundAdjusts placement of wrapped content evenly with space in between each wrapped line and the edges (top and bottom) of the container when there is extra space.

StretchAdjusts placement of wrapped content evenly with space in between each wrapped line and after the last line (bottom) of the container when there is extra space.

Direction: Column

The following table shows the icons and properties they represent when Direction: Column is selected. The icon that's displayed if Reverse order is selected is also shown.

 Click here to view the Direction: Column icons and properties...


Items
Column IconColumn Reversed IconPropertyDescription

Flex startChild items are placed along the start (left) of the container when there is extra space.

CenterChild items are placed along the center of the container when there is extra space.

Flex EndChild items are placed along the end (right) of the container when there is extra space.

StretchChild items are stretched from left to right of the container.

Baseline

Child items are placed so the baseline of the text matches for all of them when there is extra space.

Justify
Column Icon
Column Reversed IconPropertyDescription

Flex startAdjusts placement of children to the start (top) of the container when there is extra space. If reversed, children are placed along the bottom.

CenterAdjusts placement of children along the center of the container when there is extra space.

Flex EndAdjusts placement of children along the end (bottom) of the container when there is extra space. If reversed, children are placed along the top.

Space BetweenAdjusts placement of children with space in between them reaching to the edges of the container when there is extra space.

Space AroundAdjusts placement of children with even spacing in between them with some space along the edges when there is extra space.

Space EvenlyAdjusts placement of children with even spacing in between them and the edges of the container when there is extra space.
Children
IconDescription
N/ADon't WrapIf there are more components than the width allows, shrink them.
N/AWrapIf there are more components than the width allows, wrap onto the next line.

Reverse

Toggle to reverse the direction of wrap from top-down to bottom-up

Content (Only applicable when Children:Wrap is selected.)
Column Icon
Column Reversed IconPropertyDescription

Flex startAdjusts placement of wrapped content to the start (left) of the container when there is free space.

CenterAdjusts placement of wrapped content to the middle of the container when there is free space.

Flex EndAdjusts placement of wrapped content to the end (bottom) of the container when there is free space.

Space BetweenAdjusts placement of wrapped content evenly with space in between each wrapped line, reaching to the edges (left and right) of the container when there is extra space.

Space AroundAdjusts placement of wrapped content evenly with space in between each wrapped line and the edges (left and right) of the container when there is extra space.

StretchAdjusts placement of wrapped content evenly with space in between each wrapped line and after the last line of the container when there is extra space.


Component Method

This feature is new in Ignition version 8.0.3
Click here to check out the other new features

 .getChildren()
  • Description

Returns an ArrayList, which contains references to all components inside of the container.

  • Parameters

none

  • Return

Array List - An ArrayList of components in the container. The resulting ArrayList can be iterated over via a for-loop.

Examples

For more information and examples for Flex Containers, refer to Flex Layouts.


In the following example, we have three components inside a Flex container: Button, Thermometer, and LED Display. The position properties for the Button and LED Display are set so that their size will not change if the Flex container is resized. However, the Thermometer will shrink or grow depending on the Flex container size.


The following properties are set for the Flex Container:

Property

Value

props.directionrow
props.wrapnowrap
props.justify

space-between

props.alignItemscenter
props.alignContentflex-start


The following properties are set for the Button component within the container:

Property

Value

props.textNext Tank
position.grow0
position.shrink0
position.basis80px


The following properties are set for the Thermometer component within the container:

Property

Value

props.directionrow
position.grow1
position.shrink1
position.basis50%


The following properties are set for the LED Display component within the container:

Property

Value

position.grow0
position.shrink0
position.basis80px


  • No labels