1、单个侧边栏
导航的代码在分析源码的时候已经分析过了,下面只看他的一些应用与方法。

/* ---示例代码----*/

<ion-menu [content]="mycontent">
<ion-content>
<ion-list>
...
</ion-list>
</ion-content>
</ion-menu> <ion-nav #mycontent [root]="rootPage"></ion-nav> /* ---示例代码----*/
上边的代码其实就生成了一个简单的 view
值得注意的 是 #mycontent  [content]="mycontent" 其实就形成了一个绑定 告诉 侧边栏 我的内容是 ion-nav里的。
因为ionic 他是把侧边栏的content写到 ion-side-menus 里面的。。所以这里ionic2 比较人性化。代码不会一坨一坨的分不清哪个是写侧边栏列表的,哪个是写内容的。
 
2、多个侧边栏 和 MenuController API
/* ---示例代码----*/

<ion-menu id="authenticated" side="left" [content]="mycontent">...</ion-menu>
<ion-menu id="unauthenticated" side="left" [content]="mycontent">...</ion-menu> <ion-nav #mycontent [root]="rootPage"></ion-nav> /* ---示例代码----*/
先看side,side是控制侧边栏在左侧或右侧,默认是左侧。主要看 id , id的值要是唯一的 。我们给每一个ion-menu 设置了一个id 这个时候 页面进来的时候
那个ion-menu侧边栏在最上面 。就显示哪个 。
导入:import { MenuController } from 'ionic-angular';
我们需要 用 MenuController 来控制 侧边栏的一些方法。其中 this.menu.enable(); 方法就是用来控制多个侧边栏的展示
他可以传两个参数 或者 一个参数。 
    1、两个参数 的话 第一个参数 代表是否显示 第二个参数 是 menuId 值
    2、一个参数的话 就是 menuId 一旦设置一个参数的话其他的侧边栏 也将会隐藏
/* ---示例代码----*/

enableAuthenticatedMenu() {

  this.menu.enable(true, 'authenticated');
this.menu.enable(false, 'unauthenticated');
//或者
this.menu.enable('authenticated'); } /* ---示例代码----*/
MenuController 还有 很多方法。
    1、打开 open()
    2、关闭 close() 这个方法可以带一个参数 menuId
    3、切换 toggle(menuId) 这个方法可以带一个参数 menuId 当侧边栏打开则关闭,关闭则打开
    4、enable(show,menuId) 控制多个侧边栏。两个参数或一个参数。
    5、swipeEnable(shouldEnable,menuId)  第一个参数代表是否禁用,第二个参数是 哪个menuId
    6、isOpen() 侧边栏是否打开。
    7、isEnabled() 判断有没有侧边栏能够被打开。
    8、get(menuId) 返回一个侧边栏的实例
    9、getMenus() 返回所有侧边栏的实例。
3、侧边栏的API
 
例如:

<ion-menu id="menu" [content]="content"  >
 

1、content      对应内容。

2、id    侧边栏Id
3、side   侧边栏的位置
4、type   侧边栏的显示类型
5、enabled    侧边栏是否可用
6、swipeEnabled   侧边栏是否可以滑动展出
7、persistent   是否应该坚持子页面菜单。

7、侧边栏:Menu的更多相关文章

  1. 在RichFaces中使用Facelets模板

    在RichFaces中使用Facelets模板 目录 Facelets简介 Facelets标签 创建相应文件 Facelets简介 Facelets是用来构建JSF应用程序的默认视图技术.它为表现层 ...

  2. Android开源库集合(控件)

    RecycleView: RecycleView功能增强 https://github.com/Malinskiy/SuperRecyclerView RecycleView功能增强(拖拽,滑动删除, ...

  3. create-react-app 搭建的项目中,让 antd 通过侧边栏导航 Menu 的 Menu.Item 控制 Content 部分的变化

    第一种:BrowserRouter把Menu和Route组给一起包起来 <Router></Router> 标签要把Menu和Route组给一起包起来 修改src/index. ...

  4. 基于slideout.js实现的移动端侧边栏滑动特效

    HTML5现在本领太大了,PC端已经无法满足它的胃口了,它将强势攻入移动端,所以移动端中各种特效也得基于HTML5实现,看看我们将要介绍的slideout.js,能帮我们实现怎么样的侧边栏滑动特效呢~ ...

  5. Android 侧边栏(使用Support Library 4提供的扩展组件)

    本文转自:http://www.apkbus.com/android-117148-1-1.html 写在前面的话:接触Android已经有一段时间了,自己积累的东西也算蛮多的.总结以往的经验,凡是关 ...

  6. Android SlidingMenu 滑出侧边栏

    最近有个项目需要使用侧边栏,而且希望是左右两侧都能够滑出侧边菜单,在网上查找实现方式时,发现大家用的最多的还是大神jfeinstein10的SlidingMenu库,地址https://github. ...

  7. Creating a Navigation Drawer 创建一个导航侧边栏

    The navigation drawer is a panel that displays the app’s main navigation options on the left edge of ...

  8. 动态修改ActionBar Menu的显示

    应用场景: 在主Activity中,采用InstrumentedActivity侧边栏的方式,侧边栏的每一项对应一个Fragment,要实现不同的Fragment动态显示与隐藏ActionBar Me ...

  9. 好用的侧边栏菜单/面板jQuery插件

    我想大家都用过一些APP应用,它们的菜单展示是以侧边栏滑动方式展现,感觉很新鲜,而现在网页设计也是如此,不少网站也效仿这样的方式来设计.使用侧边栏的好处就是可以节约空间,对于一些内容多或者喜欢简约的网 ...

随机推荐

  1. 解决git一直输入用户名和密码的问题

    git config --system --unset credential.helper,在git中输入此命令后,每次拉去代码需要重新输入用户名和密码,可以使用git config --global ...

  2. (原创)数据结构之利用KMP算法解决串的模式匹配问题

      给定一个主串S(长度<=10^6)和一个模式T(长度<=10^5),要求在主串S中找出与模式T相匹配的子串,返回相匹配的子串中的第一个字符在主串S中出现的位置. 输入格式: 输入有两行 ...

  3. ajax的get,post ,封装

    let ajax = new Object(); ajax.get = function(url,fn){ //创建ajax对象 let xhr = new XMLHttpRequest(); //与 ...

  4. VUE学习(一)

    1.搭建vue环境 2.了解 v-on  事件监听,常常跟事件(click,mousemove,change等鼠标或者手势事件)在一起,eg:v-on:click,语法糖——:(冒号) 需要在meth ...

  5. Jenkins 更换国内源

    jenkins插件清华大学镜像地址https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json1更换地址方法1.进入j ...

  6. 【算法笔记】B1001 害死人不偿命的(3n+1)猜想

    1001 害死人不偿命的(3n+1)猜想 (15 分)卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把 (3n+1) 砍掉一半.这样一直反复砍 ...

  7. HDU - 3033 滚动数组有坑

    每层至少一个,滚动时要判上一层非法与否,所以每次都要memset #include<bits/stdc++.h> #define rep(i,j,k) for(int i=j;i<= ...

  8. mysql一些简单操作

    创建数据库,删除数据库 create database databasename charset utf8 collate utf8_general_ci;设置字符集utf8,校对规则utf8_gen ...

  9. javascript 中typeOf

    JS中的变量是松散类型(即弱类型)的,可以用来保存任何类型的数据. typeof 可以用来检测给定变量的数据类型,可能的返回值: 1. 'undefined' --- 这个值未定义: 2. 'bool ...

  10. 【中间件】IIS短文件名枚举漏洞

    1.1.1  漏洞描述 为了兼容16位MS-DOS程序,Windows为文件名较长的文件(和文件夹)生成了对应的windows 8.3 短文件名. 在Windows下查看对应的短文件名,可以使用命令 ...