DRAWER

<DRAWER/> : <BOX/>

The <DRAWER/> widget is used to create sliding drawer overlays. Drawers 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	bottom	The position of the drawer, Valid entries are left, right, top and bottom	✔️
handle	boolean	false	Create a drag handle for the drawer
size	string	100%	The max size a drawer can open to

Methods

Name	Description
open()	Opens the drawer
close()	Closes the drawer

Examples

Example #1 : A sample layout with drawers on the top, bottom, left and right sides.

<FML>
    <!-- top drawer -->
    <DRAWER id="topd" side="top" size="200" handle="true" color="#f1E393A0,#DFE8F5" start="bottom" end="top" center="true">
	<BUTTON onclick="topd.close();"><TEXT value="TOP DRAWER" /><ICON icon="close" size="20" /></BUTTON>
    </DRAWER>
    
    <!-- bottom drawer -->
    <DRAWER id="bottomd" side="bottom" size="300" handle="true" color="#f1E393A0,#DFE8F5" start="top" end="bottom" center="true">
        <BUTTON onclick="bottomd.close();"><TEXT value="BOTTOM DRAWER" /><ICON icon="close" size="20" /></BUTTON>
    </DRAWER>
    
    <!-- left drawer -->
    <DRAWER id="leftd" side="left" size="200" handle="true" color="#f111998e,#38ef7d" start="right" end="left" center="true">
        <BUTTON onclick="leftd.close();"><TEXT value="LEFT DRAWER" /><ICON icon="close" size="20" /></BUTTON>
    </DRAWER>
    
    <!-- right drawer -->
    <DRAWER id="rightd" side="right" size="300" handle="true" color="#f111998e,#38ef7d" start="left" end="right" center="true">
        <BUTTON onclick="rightd.close();"><TEXT value="RIGHT DRAWER" /><ICON icon="close" size="20" /></BUTTON>
    </DRAWER>

    <!-- Buttons -->
    <BOX center="true" layout="column">		
   
      <BUTTON onclick="topd.open()">
        <ICON icon="keyboard_double_arrow_down"/>
      </BUTTON>

     <ROW expand="false">
	<BUTTON onclick="leftd.open()">
	  <ICON icon="keyboard_double_arrow_right" />
	</BUTTON>

        <BUTTON onclick="rightd.open()">
          <ICON icon="keyboard_double_arrow_left" />
        </BUTTON>
     </ROW>

     <BUTTON onclick="bottomd.open()">
       <ICON icon="keyboard_double_arrow_up" />
     </BUTTON>

   </BOX>

</FML>

See it in Action

Other Widget(s) You May Find Useful:

• Events
• <FML/>
• <ROW/>
• <COLUMN/>
• <BOX/>