Expanded - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki

EXPANDED when used within a ROW, COLUMN, or BOX using the respective layout of row or column, expands its non sized children to fill and share the remaining space within the parent widget based on its flex factor.

• Usage - Ideals: - Restrictions: - Parent: - Children:
• Widget Attributes
• Examples
  • Use cases
    • Evenly Space - (fig. 1)
    • Space by flex Ratio - (fig. 2)
    • Fill Remaining Space - (fig. 3)
  • Visualizations - (img. 1) - (img. 2) - (img. 3)
• Other Widgets You May Find Useful:

The EXPANDED widget is used as a direct child of either ROW or COLUMN to fill and share the space children take up within their parent.

• Use EXPANDED completely fill a row with the child(ren).
• Use EXPANDED to create evenly spaced children where children are different relative dimensions.
• Be cautious of minimum and maximum size of the ROW/COLUMN, EXPANDED is a responsive wrapper which will expand and contract based on its parent's size, this can adversely space children an unintended/unconventional distance apart on large displays.

• EXPANDED does not increase the parent ROW/COLUMN size, the parent needs to be larger than the combined children to utilize EXPANDED's wrapping expansion effect.

• If wrap is enabled, EXPANDED will grow its child to force wrapping of the widget.

• Some children have built in alignments causing them to appear not to be affected by an EXPANDED wrapper, an example is TEXT. TEXT is left aligned for reading so if you need to expand a TEXT widget and align it center you would need to first wrap TEXT in a ROW with a halign="center" attribute to center it then EXPANDED that row. (fig. 1) example shows a comparison, without the EXPANDED wrapper the ROW shrinks to the TEXT child making the halign attribute moot.

ROW, COLUMN or BOX when layout="row or col/column"

Any

<BOX height="60" width="50%">
	<ROW valign="center">
		<EXPANDED>
			<BUTTON onclick="save()" color="transparent">
				<TOOLTIP text="Save">
					<ICON icon="save" color="white"/>
				</TOOLTIP>
			</BUTTON>
		</EXPANDED>
		<EXPANDED>
			<ROW halign="center"><TEXT color="blue">Expanded Example</TEXT></ROW>
		</EXPANDED>
		<EXPANDED>
			<TOOLTIP text="Disabled">
				<ICON size="60" icon="cancel" color="grey"/>
			</TOOLTIP>
		</EXPANDED>
	</ROW>
</BOX>

Visual comparison of above example with and without EXPANDED (img. 1)

flex works as a cumulative ratio, by default all EXPANDED items have a flex value of 1 and therefore each item contributes to the total flex value. In the below example the flex ratio is 1/2/1:4 we have 3 EXPANDED flex children, 1/2/1 and a total combined flex value of :4. This means each flex is 100% / 4 = 25% of the parent ROW. Item 1 is 1 * 25% = 25%, Item 2 is 2 * 25% = 50% and item 3 is 1 * 25% = 25%. Thats 25%/50%/25%:100% of the parent ROW.

<BOX height="60" width="50%">
	<ROW valign="center">
		<EXPANDED flex="1">
			<BUTTON onclick="save()" color="transparent">
				<TOOLTIP text="Save">
					<ICON icon="save" color="white"/>
				</TOOLTIP>
			</BUTTON>
		</EXPANDED>
		<EXPANDED flex="2">
			<ROW halign="center"><TEXT color="blue">Expanded Example</TEXT></ROW>
		</EXPANDED>
		<EXPANDED flex="1">
			<TOOLTIP text="Disabled">
				<ICON size="60" icon="cancel" color="grey"/>
			</TOOLTIP>
		</EXPANDED>
	</ROW>
</BOX>

Visual breakdown of above example with flex 1/2/1:4 (img. 2)

You can also utilize EXPANDED to fill remaining space in a row, in the below example we only wrap the ROW child so that it expands as much as it can, pushing the children on either side to achieve a visually similar effect to a parent ROW with halign="spacebetween".

<BOX height="60" width="50%">
	<ROW valign="center">
		<BUTTON onclick="save()" color="transparent">
			<TOOLTIP text="Save">
				<ICON icon="save" color="white"/>
			</TOOLTIP>
		</BUTTON>
		<EXPANDED>
			<ROW halign="center"><TEXT color="blue">Expanded Example</TEXT></ROW>
		</EXPANDED>
		<TOOLTIP text="Disabled">
			<ICON size="60" icon="cancel" color="grey"/>
		</TOOLTIP>
	</ROW>
</BOX>

Visual example of using expanded to fill empty space in a row (img. 3)

Template: (fig. 1)

Template: (fig. 2) displaying a 1/2/1:4 flex ratio You can compare this to the above image example (fig. 1) with a 1/1/1:3 flex ratio

Template: (fig. 3)

See it in Action

• Layout Basics
• ROW
• COLUMN