Skip to main content

Row

Element type: Dictionary
Availability: 3.1.0+

Places its children side by side on a single line, instead of stacking them vertically like a container does. Use it for a two-column layout, an icon next to a paragraph, or a grid of Cards.

Keys​

NameTypePossible valuesRequired
TypeStringRowRequired
ComponentsArray-Required
WidthNumber-
AlignmentStringLeft, Center, Right
MarginsDictionary (Margins)-
BorderDictionary (Border)-
Condition PROString (Condition)-

Detail​

Type Required​

Type: String
Explanation: The type of the component which has to be Row.

Components Required​

Type: Array
Explanation: The components displayed side by side, from left to right. The array cannot be empty. Each child may carry a WidthRatio key to set its share of the row's width.

The following components are accepted as children: Text, Button, Image, SFSymbol, Video, Input, Column and Card.

warning

Web, Spacer, PDF, MonitorsDisplay, Carousel and a nested Row are not accepted as children, and neither is any child with ShouldFillSpace set to true. Using one makes the configuration fail to load, with an error naming the offending key path.

info

Children are separated by a fixed 8 pt spacing. To stack several components inside one cell of the row, wrap them in a Column.

WidthRatio​

Type: Number
Explanation: The share of the row's width taken by a child, between 0 (excluded) and 1 (included). This key is not set on the row itself: it is written inside each child's dictionary, next to its Type key.

info

WidthRatio is all-or-none: either every child defines one, or none does. When no child defines it, the available width is split equally. When they do, the values must add up to 1.0 (with a 0.001 tolerance), otherwise the configuration fails to load.

Width​

Type: Number
Explanation: The share of the container's width taken by the whole row, between 0 (excluded) and 1 (included). If not specified, the row uses the full available width. A value of 0, or a value greater than 1, makes the configuration fail to load.

Alignment​

Type: String
Possible values: Left, Center, Right
Default: Center
Explanation: Where the row sits horizontally within the container when it does not take the full width. Has a visible effect only together with the Width key, but the value is validated in every case.

Margins​

Type: Dictionary (Margins)
Explanation: Add padding to the component's sides.

Border​

Type: Dictionary (Border)
Explanation: Add a top or bottom border to a component.

Condition PRO​

Type: String (Condition)
Explanation: Allows to hide or show the component using a boolean expression. Hiding a row hides all of its children.

Examples​

A symbol next to a block of text, the symbol taking 10% of the width and the text the remaining 90%.

<?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>Components</key>
					<array>
						<dict>
							<key>Type</key>
							<string>Row</string>
							<key>Components</key>
							<array>
								<dict>
									<key>Type</key>
									<string>SFSymbol</string>
									<key>Name</key>
									<string>lightbulb.fill</string>
									<key>Size</key>
									<real>26</real>
									<key>WidthRatio</key>
									<real>0.1</real>
								</dict>
								<dict>
									<key>Type</key>
									<string>Text</string>
									<key>Text</key>
									<string>Your Mac is being configured. This should only take a few minutes.</string>
									<key>WidthRatio</key>
									<real>0.9</real>
								</dict>
							</array>
						</dict>
					</array>
				</dict>
			</array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>

A row narrowed to 60% of the container and pushed to the left.

<?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>Components</key>
	<array>
		<dict>
			<key>Type</key>
			<string>Row</string>
			<key>Width</key>
			<real>0.6</real>
			<key>Alignment</key>
			<string>Left</string>
			<key>Components</key>
			<array>
				<dict>
					<key>Type</key>
					<string>Button</string>
					<key>Style</key>
					<string>Simple</string>
					<key>Text</key>
					<string>Install</string>
				</dict>
				<dict>
					<key>Type</key>
					<string>Button</string>
					<key>Style</key>
					<string>Simple</string>
					<key>Text</key>
					<string>Skip</string>
				</dict>
			</array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>
Last updated on