Drawer - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki
<DRAWER/> : <BOX/>
The <DRAWER/> widget adds open/closable sliding drawer overlays which do not take up screen space when closed.
- Only 1 drawer can be in the open position at a time
- <DRAWER/> widgets must be children of the outer framework <FML/> widget, a <ROW/>, a <COLUMN/> or a <BOX/> widget.
| Name | Type | Default | Description | Req |
|---|---|---|---|---|
| side | string ("left", "right", "top", "bottom") | The position of the drawer | ✔️ | |
| handle | bool | false | Create a drag handle for the drawer | |
| size | string | 100% | The max size a drawer can open to |
| Name | Description |
|---|---|
| open(<id>) | Opens the drawer with id=<id> if not already open |
| close(<id>) | Closes the drawer with id=<id>if not already closed |
This Drawer playground lets you get a feel for how drawers work because they are the most interactive layout widget, try it out yourself or view the .gif below
<FML>
<DRAWER id="topd" side="top">
<BOX color="#f1E393A0,#DFE8F5" start="bottom" end="top" center="true">
<BUTTON onclick="close('topd');"><TEXT value="TOP DRAWER" /><ICON icon="close" size="20" /></BUTTON>
</BOX>
</DRAWER>
<DRAWER id="bottomd" side="bottom" size="600" handle="true">
<BOX color="#f1E393A0,#DFE8F5" start="top" end="bottom" center="true">
<BUTTON onclick="close('bottomd');"><TEXT value="BOTTOM DRAWER" /><ICON icon="close" size="20" /></BUTTON>
</BOX>
</DRAWER>
<DRAWER id="leftd" side="left" size="200">
<BOX color="#f111998e,#38ef7d" start="right" end="left" center="true">
<BUTTON onclick="close('leftd');"><TEXT value="LEFT DRAWER" /><ICON icon="close" size="20" /></BUTTON>
</BOX>
</DRAWER>
<DRAWER id="rightd" side="right" size="300" handle="true">
<BOX color="#f111998e,#38ef7d" start="left" end="right" center="true">
<BUTTON onclick="close('rightd');"><TEXT value="RIGHT DRAWER" /><ICON icon="close" size="20" /></BUTTON>
</BOX>
</DRAWER>
<POS top="={SYSTEM.screenheight}/2 - 90" left="={SYSTEM.screenwidth}/2 - 30">
<BUTTON onclick="open('topd')"><ICON icon="keyboard_double_arrow_down" /></BUTTON>
</POS>
<POS top="={SYSTEM.screenheight}/2 + 30" left="={SYSTEM.screenwidth}/2 - 30">
<BUTTON onclick="open('bottomd')"><ICON icon="keyboard_double_arrow_up" /></BUTTON>
</POS>
<POS left="={SYSTEM.screenwidth}/2 - 90" top="={SYSTEM.screenheight}/2 - 30">
<BUTTON onclick="open('leftd')"><ICON icon="keyboard_double_arrow_right" /></BUTTON>
</POS>
<POS left="={SYSTEM.screenwidth}/2 + 30" top="={SYSTEM.screenheight}/2 - 30">
<BUTTON onclick="open('rightd')"><ICON icon="keyboard_double_arrow_left" /></BUTTON>
</POS>
</FML>
