ROW - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki
<ROW/> : <BOX/>
The <ROW/> widget lays out its children horizontally. When not given a width and/or height, the row will grow to its parents size in the horizontal, and shrink to its largest child in the vertical.
- The alignment properties will only on the horizontal axis, consider using a
<COLUMN/>for vertical layouts.
| Name | Type | Default | Description | Req |
|---|---|---|---|---|
| layout | string | row | Fixed. Cannot be changed | |
| expand | bool | true | If the widget expands to fill its parent, or shrinks to fit its children. By default, ROW expands horizontally to fill the available space and shrinks vertically to the height of its largest child. If the horizontal space is infinite, typically when wrapped in a horizontal <SCROLLER/>, the <ROW/> will automatically shrink horizontally to fit its children rather than expand to fill the parent. |
For in-depth alignment details see, Layout Basics
<FML title="ROW (example1)" linkable="true">
<ROW halign="between" bordercolor="red" radius="50" margin="20" padding="20">
<TEXT value="Hello World!"/>
<TEXT value="Hello World!"/>
<TEXT value="Hello World!"/>
<TEXT value="Hello World!"/>
</ROW>
</FML>
<FML title="ROW (example2)" layout="column">
<ROW>
<COL expand="false" margin="5">
<TEXT size="12" value="Vertical Alignment"/>
<SELECT id="verticalalignment" value="center" hint="Vertical Layout" width="200">
<OPTION value="center" />
<OPTION value="start" />
<OPTION value="end" />
<OPTION value="between" />
<OPTION value="around" />
</SELECT>
</COL>
<COL expand="false" margin="5">
<TEXT size="12" value="Horizontal Alignment"/>
<SELECT id="horizontalalignment" value="center" hint="Horizontal Layout" width="200">
<OPTION value="center" />
<OPTION value="start" />
<OPTION value="end" />
</SELECT>
</COL>
</ROW>
<BOX center="true" border="all" borderwidth="2" bordercolor="orange600" height="80%">
<COL valign="{verticalalignment}" halign="{horizontalalignment}" height="100%" width="100%">
<BOX radius="56" color="red400" expand="false">
<TEXT value="F" size="56" />
</BOX>
<BOX radius="56" color="indigo200" expand="false">
<TEXT value="M" size="56"/>
</BOX>
<BOX radius="56" color="blue200" expand="false">
<TEXT value="L" size="56"/>
</BOX>
<BOX radius="56" color="green200" expand="false">
<TEXT value=":smile:" size="56"/>
</BOX>
</COL>
</BOX>
</FML> <FML>
<BOX layout="column" width="100%" color="#EEEEEE">
<ROW halign="between" valign="center">
<BUTTON onclick="back()" label="Go Back" color="black">
<ICON icon="keyboard_arrow_left" />
</BUTTON>
<TEXT label="Page Title" size="24" />
<ROW expand="false" valign="center">
<INPUT width="100" hint="Search" />
<ICON icon="search" />
</ROW>
</ROW>
</BOX>
</FML>
When wrap="true" the row tries to put as much as it can in the row then creates wraps below doing the same, only the last wrap will follow alignment, the rest will just align to the start of the main axis
<FML>
<BOX expand="false" width="100%" maxwidth="500" color="bluegrey">
<ROW halign="evenly" wrap="true">
<BOX width="100" height="28" color="amber" center="true">
<TEXT>Hey Hi Hello</TEXT>
</BOX>
<ICON icon="waving_hand" color="orange" />
<BOX width="100" height="28" color="amber" center="true">
<TEXT>Hey Hi Hello</TEXT>
</BOX>
<ICON icon="waving_hand" color="orange" />
<BOX width="100" height="28" color="amber" center="true">
<TEXT>Hey Hi Hello</TEXT>
</BOX>
<ICON icon="waving_hand" color="orange" />
<BOX width="100" height="28" color="amber" center="true">
<TEXT>Hey Hi Hello</TEXT>
</BOX>
<ICON icon="waving_hand" color="orange" />
<BOX width="100" height="28" color="amber" center="true">
<TEXT>Hey Hi Hello</TEXT>
</BOX>
<ICON icon="waving_hand" color="orange" />
<BOX width="100" height="28" color="amber" center="true">
<TEXT>Hey Hi Hello</TEXT>
</BOX>
<ICON icon="waving_hand" color="orange" />
<BOX width="100" height="28" color="amber" center="true">
<TEXT>Hey Hi Hello</TEXT>
</BOX>
<ICON icon="waving_hand" color="orange" />
</ROW>
</BOX>
</FML>