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

Drawer

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

logo See it in Action

Other Widget(s) You May Find Useful:

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