Menu

<MENU/> : <BOX/>

The <MENU/> widget is used for naviagtion between pages. Menu's are made up of one more menu <ITEM/>'s. Menus can be static or dyanmic. Dynamic menu's define a single prototype <ITEM/> and a data source.

Each <ITEM/> created in the menu has its own unique scope. This allows widgets within the each <ITEM/> to have similar id's to widgets defined in other <ITEM/>'s.

Attributes

Name	Type	Req
color	Color

Examples

Example #1 : a simple menu with 3 static <ITEM/>'s

<MENU color="transparent">
   <ITEM title="Edit"     subtitle="Menu" icon="build" url="assets/templates/examples/menu-example1.xml"/>
   <ITEM title="Settings" subtitle="Menu" icon="settings" url="assets/templates/examples/menu-example1.xml"/>
   <ITEM title="Google"   subtitle="Link" icon="insert_link" url="https://google.com"/>
</MENU> 

See it in Action

Example #2 : a dynamic menu tied to a data source and a prototype <ITEM/>

<TESTDATA id="db1" rows="50"/>

<MENU id="m1" data="db1"> 
  <ITEM color="white, #00FF0055" onclick="profile.open();" title="{data.first} {data.last}" subtitle="Click to View" icon="person" iconcolor="={this.selected} ? 'green' : '{THEME.primary}'"/>
</MENU> 
  
<MODAL id="profile" width="250" height="250" draggable="true" title="{m1.selected.first}">
    <ICON value="person" size="100" color="green"/> 
    <TEXT value="First Name: **{m1.selected.first}**"/>    
    <TEXT value="Last Name: **{m1.selected.last}**"/>    
</MODAL> 

See it in Action

Other Documentation You May Find Useful

• <ITEM/>
• <LINK/>