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.

Restrictions:

  • 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.

Attributes

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

Methods

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

Examples

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>

Drawer

logo See it in Action

Other Widget(s) You May Find Useful:

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