Containers

Containers are horizontally stacked in a Slide.
The following keys let you customise the appearance and behavior of the container.

Keys

Name	Type	Possible values	Required
Components	Array (Dictionary)		Required
BackgroundImage	String
IsLarge	Boolean	-	excludes WidthRatio
WidthRatio	Number	0...1	excludes IsLarge
InputComponentsDistribution	String	Fit, Center
InputComponentPercentWidth	Number	0...1
BorderColor	Dictionary (Color)	-

Detail

Components Required

Type: Array(Component)
Explanation: Specify here the components held by the container. The order of the components in the array will determine their vertical order when displayed.

info

Components in a container are stacked vertically. Like for Containers in a slide, you can put as many Components as you want in a Container.

BackgroundImage

Type: String
Explanation: Used to specify the background image for the container. This key allows the assignment of an URL or path to the image. The image will be automatically scaled to fit the container.

IsLarge

Type: Boolean
Default: false
Explanation: When set to true, this container will take two third of the available width in the window, while the other container will be restricted to the remaining third. Only applies if two containers are specified in the slide, and if one only has a IsLarge key set to true. It’s not possible to mix WidthRatio and IsLarge.

WidthRatio

Type: Number
Availability: 2.1.0+
Explanation: Specify a width ratio for each container. It’s not possible to mix WidthRatio and IsLarge. The value of the ratio should be between 0 and 1. When no ratio is specified for one or more container, although it is for others, the containers without width ratio specification will equally share the remaining width. The sum of the width ratios has to be lesser than one. And if all containers in a slide have a width ratio specified, the sum of the ratios should be equal to one.

InputComponentsDistribution

Type: String
Possible values: Fit, Center
Explanation: When displaying several input components, you can specify here the distribution those components should adopt. If one component already has a Distribution key set, the general distribution specified in the container has no effect.

InputComponentPercentWidth

Type: Number
Default: 0.4
Possible values: 0...1
Explanation: This value allows you to give more width to an input component, by specifying the percentage width it should take in its container. If specified here, all inputs component should have this width by default if they do not specify one locally. Default is 0.4.

BorderColor

Type: Dictionary (Color)
Explanation: The color of the border drawn around the containers. Override the value set in the ContainersBorderColor of the slide.

Examples

Container with a IsLarge key set to true.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Slides</key>
	<array>
		<dict>
            <key>Containers</key>
            <array>
                <dict>
                    <key>IsLarge</key>
                    <true/>
                    <key>Components</key>
                    <array>
                        <!-- The components go here -->
                    </array>
                </dict>
            </array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>

Container with centered InputComponents

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Slides</key>
	<array>
		<dict>
            <key>Containers</key>
            <array>
                <dict>
                    <key>InputComponentsDistribution</key>
                    <string>Center</string>
                    <key>Components</key>
                    <array>
                        <!-- The components go here -->
                    </array>
                </dict>
            </array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>

Specify that the first container should take 60% of the slide width, the second 30% and the last one automatically takes the remaining 30%.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Slides</key>
	<array>
        <dict>
            <key>Containers</key>
            <array>
                <dict>
                    <key>WidthRatio</key>
                    <real>0.6</real>
                    <key>Components</key>
                    <array>...</array>
                </dict>
                <dict>
                    <key>WidthRatio</key>
                    <real>0.3</real>
                    <key>Components</key>
                    <array>...</array>
                </dict>
                <dict>
                    <key>Components</key>
                    <array>...</array>
                </dict>
            </array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>