STACK

<STACK/> : <BOX/>

The <STACK/> widget layers its children one on top of the next starting from the first child specified. Children are positioned at x,y coordinate 0,0 by default. Positioned children need to be wrapped insize of a <POSITIONED/> widget.

Consider using a <ROW/> or <COLUMN/> widget for layout's which do not require widget overlay.

Attributes

Name	Type	Default	Description	Req
layout	string	stack	Fixed. Cannot be changed.
expand	bool	true	If the widget expands to fill its parent, or shrinks to fit its children. By default, <STACK/> expands both horizontally and vertically to fill the available space. If either of the available vertical or horizontal space is infinite, typically when wrapped in a <SCROLLER/>, the <STACK/> will shrink rather than expand in that axis.

Examples

In the below example STACK is used to create a custom header which is POSITIONED on top of a scrollable profile page prototype. STACK is also used to layer widgets over top of the profile picture.

<FML>
    <STACK>
        <SCROLLER>
            <BOX height="50" width="100%" /> <!-- Add header height as scroller child -->
            <BOX layout="row" color="#DEC396" width="100%" expand="false">
                <STACK height="256" width="256">
                    <BOX expand="false" radius="256">
                        <IMAGE url="resources/images/doge.png" width="256" height="256" rotation="180" />
                    </BOX>
                    <POS top="20" right="20">
                        <BOX color="green" radius="10" width="10" height="10" elevation="1" shadowx="0" shadowy="0" shadowcolor="lightgreen"/>
                    </POS>
                    <POS top="40" right="40">
                        <BOX color="blur" radius="20" expand="false">
                            <ICON icon="edit"/>
                        </BOX>
                    </POS>
                </STACK>
                <PAD all="20" />
                <COL>
                    <TEXT value="Username" size="56" />
                    <TEXT value="Title" size="32"/>
                </COL>
            </BOX>
            <BOX height="300" color="#F9F9F9">
                <TEXT value="About Section"/>
            </BOX>
            <BOX height="200" color="#F1EFEE">
                <TEXT value="Likes and Groups"/>
            </BOX>
            <BOX height="300" color="#F9F9F9">
                <TEXT value="Friends Section"/>
            </BOX>
            <BOX height="1000" color="#F1EFEE">
                <TEXT value="Posts Section"/>
            </BOX>
        </SCROLLER>
        <POS top="0">
            <BOX height="50" width="100%" layout="row" halign="between" valign="center" color="#E9DACA">
                <BUTTON onclick="back()" color="black">
                    <ICON icon="keyboard_arrow_left" />
                </BUTTON>
                <TEXT label="Custom Header" size="24" />
                <POPOVER icon="account_circle" label="Profile">
                    <ITEM label="View" onclick="" />
                    <ITEM label="Edit" onclick="" />
                    <ITEM label="Logout" onclick="" />
                </POPOVER>
            </BOX>
        </POS>
    </STACK>
</FML>

See it in Action

Other Widgets You May Find Useful:

• Layout Basics
• <POS/>
• <BOX/>
• <COLUMN/>
• <ROW/>