7. Sidebar: Menu

Source: Internet
Author: User

1. Single Side barNavigation code in the analysis of the source of the time has been analyzed, the following only to see some of his application and methods.
/ *---Sample code----* /<Ion-menu[content]= "Mycontent">  <ion-content>    <ion-list>    ...    </ion-list>  </ion-content></Ion-menu> <Ion-nav#mycontent [Root]= "Rootpage"></Ion-nav>/ *---Sample code----* /
The above code actually generates a simple view worth noting is #mycontent and the [content]=] mycontent" Actually formed a binding to tell sidebar my content is Ion-nav. Because ionic he is the content of the sidebar to write to Ion-side-menus inside. So here ionic2 more humane. The code will not be a lump of a lump of which is written in the sidebar list, which is written content. 2. Multiple sidebar and Menucontroller API
/ *---Sample code----* /<Ion-menuID= "Authenticated"side= "Left"[content]= "Mycontent">...</Ion-menu><Ion-menuID= "unauthenticated"side= "Left"[content]= "Mycontent">...</Ion-menu> <Ion-nav#mycontent [Root]= "Rootpage"></Ion-nav>/ *---Sample code----* /
First look at the side,side is the control sidebar on the left or right side, the default is the left side. Mainly look at the ID, the value of the ID is unique. We set an ID for each ion-menu this time the page comes in when the Ion-menu sidebar is on top. It shows which. Import: import {  MenuController  } from  ‘ionic-angular‘ ;We need to use MenucontrollerTo control some of the sidebar's methods. which this.menu.enable ();method is used to control the display of multiple sidebar he can pass two parameters or a parameter. 1, two parameters if the first parameter indicates whether the second parameter is menuId value 2, one parameter is menuId once you set a parameter, the other sidebar will also be hidden
/* ---The sample code---- */ Enableauthenticatedmenu () {   this. menu.enable (True, ' authenticated ');    this. menu.enable (false, ' unauthenticated ');   // or  this. menu.enable (' authenticated '/*  ---Sample code----* /
MenucontrollerThere are many other ways. 1. Open Open ()2. Close Close ()This method can take a parameter menuId 3, switch Toggle (menuId)This method can take a parameter menuId when the sidebar is open then close, open 4, enable (show,menuId) Controls multiple sidebar.    Two parameters or one parameter. 5. swipeenable (shouldenable,menuId) The first parameter represents whether to disable, and the second parameter is which MenuID 6, IsOpen ()Whether the sidebar is open. 7. isenabled ()Determine if there is a sidebar that can be opened. 8. Get (menuId) Returns an instance of a sidebar 9, Getmenus ()Returns an instance of all the sidebar.
3. Side Bar APIFor example:
<ion-menu id="menu"[content]="content">
 1 content correspondence. 2, ID side bar Id3, side side bar position 4, type side bar display Type 5, enabled sidebar is available 6, swipeenabled side bar can slide show 7, persistent should adhere to sub-page menu.

7. Sidebar: Menu

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.