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.

Restrictions:

  • The alignment properties will only on the horizontal axis, consider using a <COLUMN/> for vertical layouts.

Attributes

Name Type Default Description Req
layout string row Fixed override on Box. 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

Examples

Example #1 - a basic row with an alignment*
<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>

logo See it in Action

Example #2 - row with user selectable layout*
<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>	

logo See it in Action

Example #3 - row with user selectable layout*
<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>

Row

Row with wrap="true"

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>

Row

logo See it in Action

Other Widgets You May Find Useful:

⚠️ **GitHub.com Fallback** ⚠️