COLUMN - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki
<COLUMN/> : <BOX/>
The <COLUMN/> or <COL/> widget lays out its children vertically. When not given a height and/or width, the column will grow to its parents size in the vertical, and shrink to its largest child in the horizontal.
| Name | Type | Default | Description | Req |
|---|---|---|---|---|
| layout | string | column | Fixed. Cannot be changed. | |
| expand | bool | true | If the widget expands to fill its parent, or shrinks to fit its children. By default, the <COLUMN/> widget expands vertically to fit its parent and shrinks horizontally to the fit the width of its largest child. If the parent has an unbounded height, typically when wrapped in a vertical <SCROLLER/>, it will shrink to fit rather than expand. |
<FML title="COLUMN (example1)" linkable="true">
<COL valign="between" bordercolor="red" radius="10" margin="20" padding="20">
<TEXT value="Hello World!"/>
<TEXT value="Hello World!"/>
<TEXT value="Hello World!"/>
<TEXT value="Hello World!"/>
</COL>
</FML>
<FML title="COLUMN (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> For in-depth examples and full applications, visit fml.dev!