APL Container (APL 1.3 and Earlier)

---

(This is not the most recent version of APL. Use the Other Versions option to see the documentation for the most recent version of APL)

A Container is a layout that uses a subset of Flexbox/Yoga as the layout language.

Properties

The Container component has the following properties in addition to the base component properties. See the meaning of the columns.

Property	Type/Value	Default	Styled	Dynamic	Description
alignItems	stretch, center, start, end, baseline	stretch	No	No	Alignment for children in the cross-axis.
data	Array of data	none	No	No	Data to bind into this container.
direction	column, row	column	No	No	Direction that children will be laid out in.
firstItem	Array of components and layouts.	none	No	No	Component to include before all others.
item(s)	Array of components and layouts.	[ ]	No	No	Component(s) used to lay out the data set.
justifyContent	start, end, center, spaceBetween, spaceAround	start	No	No	How to distribute free space when there is room on the main axis. Defaults to start.
lastItem	Array of components and layouts.	none	No	No	Component to include after all others.
numbered	boolean	false	No	No	If true, assign ordinal numbers to children. Defaults to false.

Unlike standard Flexbox containers, APL containers never scroll unless they are placed within a ScrollView.

When the Container component is the target of an event, event.target reports the following values:

"event": {
   "target": {
     "disabled": Boolean, // True if the component is disabled
     "id": ID,            // ID of the component
     "uid": UID,          // Runtime-generated unique ID of the component
     "height": Number,    // Height of the component, in dp (includes the padding)
     "opacity": Number,   // Opacity of the component [0-1]
     "width": Number      // Width of the component, in dp (includes the padding)
   }
}

alignItems

The Flexbox specification for how children should be aligned in the cross-axis of the container. Defaults to stretch.

data

An array of arbitrary data. If the data array is bound, the container uses the data array inflation method.

direction

The direction of layout in the container. Defaults to column.

firstItem

If assigned, a single component will be prepended to the container using the single child inflation method.

item(s)

An array of components to be displayed in the container.

lastItem

If assigned, a single component will be appended to the container using the single child inflation method.

justifyContent

The Flexbox specification for how free space will be distributed when there is room on the main axis. Only useful if the container is larger than the size of its children. Defaults to start.

numbered

If true, set the data-binding ordinal for each of the items in the sequence. The ordinals start with "1" and increment by one unless the numbering property in a child is set to "skip" or "reset". Note that the firstItem and lastItem do not participate in ordinal numbering. Defaults to false.

Container children

Children of containers have additional properties that control how that child is positioned in the parent container. The children of a container support the following additional properties. These properties are used by the Container to lay out the children.

Property	Type	Default	Styled	Dynamic	Description
alignSelf	auto, start, end, center, baseline, stretch	auto	No	No	Cross-axis layout position. Defaults to auto.
bottom	Dimension	none	No	No	Specifies the distance from the bottom edge of the parent container. Used only for absolute positioning. Defaults to auto.
grow	Number	0	No	No	If positive, this component will stretch if there is extra space in the Container. Defaults to 0.
left	Dimension	none	No	No	Specifies the distance from the left edge of the parent container. Used only for absolute positioning. Defaults to 0.
numbering	normal, skip, reset	normal	No	No	Control ordinal numbering of the next child. Defaults to normal.
position	relative, absolute	relative	No	No	If absolute, this component will be positioned only with respect to the parent container. Defaults to 'relative'.
right	Dimension	none	No	No	Specifies the distance from the right edge of the parent container. Used only for absolute positioning. Defaults to auto.
shrink	Number	0	No	No	If positive, this component will shrink if there is not enough space in the Container. Defaults to 0.
spacing	Absolute Dimension	0	No	No	Additional space to add between this component and the previous component in the layout. Defaults to 0. The spacing property is not currently supported.
top	Dimension	none	No	No	Specifies the distance from the top edge of the parent container. Used only for absolute positioning. Defaults to 0.

alignSelf

Overrides the alignItems property for this child.

position, bottom, left, right, top

If position is set to "absolute", this child is taken out of the normal layout ordering for the container and instead positioned absolutely relative to the parent. The top, bottom, left, and right properties are dimensional offsets from the sides of the parent container.

In an "absolute"-positioned element where the size of the element is fixed, the left property overrides the right property if both are set and the top property overrides the bottom property if both are set. If neither is set, the element is positioned at the top-left of the parent container. For example, the following component will be positioned 5 units from the top-right of its parent container. The 5 setting for bottom is ignored:

grow, shrink

Flexbox grow and shrink properties. A positive grow value stretches the component proportionally if there is extra space in the container. A positive shrink value allows the component to shrink below its normal size if there is not enough space in the container.

Negative grow or shrink values are ignored.

numbering

Controls the ordinal value when the parent has set numbered. This property controls how the ordinal value will be updated for the next child in the sequence, not the current child in the sequence.

• normal: The next child's ordinal = ordinal + 1.
• skip: The next child's ordinal = ordinal
• reset: The next child's ordinal = 1

spacing

An amount of spacing to add between this component and the previous component in the sequence. The first item in the sequence ignores spacing. The spacing must be specified in absolute dimensions. Relative dimensions are not supported.

---

---

Last updated: Nov 28, 2023