Components have custom properties where we give an input and take the output from the components. These are classified into Input and Output Properties.
CUSTOM PROPERTIES:
Custom Properties with Input and Output Properties.
Input Properties:
- Menu Items: Input property consisting of a table with menu items.
//Menu Items Input Property...
Table(
{
ID: 1,
MenuLbl: "Home", //change the menu label
Screen: App.ActiveScreen, //place the navigation screen name
Icon: Icon.Home,
SubMenuVisible: false
},
{
ID: 2,
MenuLbl: "My Profile",
Icon: Icon.AddUser,
SubMenuVisible: true
},
{
ID: 3,
MenuLbl: "My Orders",
Icon: Icon.Shop,
SubMenuVisible: false
}
)
2. Sub-menu Items: Input property consisting of a table with sub-menu items.
//Sub menu Items Input Property...
Table(
{
MenuRef: 2, //MenuRef-->it maps to menu item ID
SubMenuID: 1,
SubMenuLbl: "Change Contact Number", //change the submenu item label
Screen: App.ActiveScreen, //place the navigation screen name
},
{
MenuRef: 2,
SubMenuID: 2,
SubMenuLbl: "Change Password",
Screen: App.ActiveScreen
},
{
MenuRef: 2,
SubMenuID: 3,
SubMenuLbl: "Change Address",
Screen: App.ActiveScreen
},
{
MenuRef: 2,
SubMenuID: 4,
SubMenuLbl: "Change Profile Picture",
Screen: App.ActiveScreen
}
)
Output Properties:
Menu-Width: Output Property of menu width changes when clicked on hamburger icon.
If menu width is not fixed, the component will take the entire app width. Since, we want the collapsible feature for our menu component. We fix the width of 1/6th of App Width if the menu is open and if the menu is closed, the width is fixed to 30.
/* menu width is dynamic i.e varOpenMenu is true the menu width is 1/6th of App
width and if varOpenMenu is false the menu width is 1/40th of App width*/
If(
varOpenMenu, //variable return a boolean value when hamburger icon is clicked
App.Width/ 6,
App.Width/ 40
)
CONCLUSION:
Creating a Two-level Hamburger menu having
- Collapsible hamburger menu width and
- Flexible number of the submenu items gallery when a menu item is expanded.
