侧边栏的使用范例：

<body >

<ion-side-menus>

  <!-- 中间内容 -->

  <ion-side-menu-content ng-controller="ContentController">

  <ion-header-bar align-title="left" class="bar-positive">

  <div class="buttons">

    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>

  </div>

  <h1 class="title" style="text-align: center;">Title!</h1>

  <div class="buttons">

    <button class="button">右侧按钮</button>

  </div>

</ion-header-bar>

  </ion-side-menu-content>

  <!-- 左侧菜单 -->

  <ion-side-menu side="left" width="180">

    left-side-menu

  </ion-side-menu>

  <!-- 右侧菜单 -->

  <ion-side-menu side="right">

  </ion-side-menu>

</ion-side-menus>

<script type="text/javascript">

  angular.module('ionicApp',['ionic'])

  .controller('ContentController',function($scope, $ionicSideMenuDelegate){

    $scope.toggleLeft = function() {

    $ionicSideMenuDelegate.toggleLeft();

  };

  });

</script>

</body>

ionic 侧边栏实例的更多相关文章

  1. 没有苹果电脑打包iOS平台的 Ionic 2程序——《Ionic 2 实例开发》更新内容

    没有苹果电脑打包iOS平台的 Ionic 2程序--<Ionic 2 实例开发>更新内容春节刚过,祝各位新的一年里万事如意,一帆风顺.<Ionic 2 实例开发>在这段时间里更 ...

  2. ionic 开发实例

    ionic 开发实例 一.ionic初始化项目 1:安装ionic npm install -g ionic 2:初始化项目框架 我们可以用命令创建一个应用程序,可以使用我们的一个现成的应用程序模板, ...

  3. 《Ionic 2 实例开发》发布

    Ionic 2系列教程集结成册,在百度阅读上架发布,名为<Ionic 2实例开发>(点击书名将打开地址:http://yuedu.baidu.com/ebook/ba1bca51e4189 ...

  4. Ionic 2 中创建一个照片倾斜浏览组件

    内容简介 今天介绍一个新的UI元素,就是当我们改变设备的方向时,我们可以看到照片的不同部分,有一种身临其境的感觉,类似于360全景视图在移动设备上的应用. 倾斜照片浏览 Ionic 2 实例开发 新增 ...

  5. 观《phonegap第三季 angularjs+ionic视频教程 实时发布》学习笔记（三）

    十五.ionic路由 1.ionic中内联模板介绍 使用内联模板内联模板的使用,常见的有几种情况.(1) 使用ng-include指令可以利用ng-include指令在HTML中直接使用内联模板,例如 ...

  6. 关于ionic开发中遇到的坑与总结

    这次是第二次使用ionic开发混合app,今天算是对这个框架做一个总结,基础的我就不再重复了,网上都有教程.我就说说自己的心得和遇见的各种坑, 之后会陆续补充,想到什么说什么吧. 1.关于ionic效 ...

  7. Ionic 2 中添加图表

    有问题请加入马画藤群:181596813,也强烈欢迎各类建议和需求:Ionic 2 实例开发 今日更新新增章节——Ionic 2 中添加图表: Chart.js是一个在HTML5的<canvas ...

  8. Ionic 2 中的创建一个闪视卡片组件

    闪视卡片是记忆信息的重要工具,它的使用可以追溯到19世纪.我们将要创建一个很酷的短暂动画来实现它.看起来像是这个样子的: 闪视卡片示例 Ionic 2 实例开发 新增章节将为你介绍如何在Ionic 2 ...

  9. Web前端开发推荐阅读书籍、学习课程下载

    转自http://www.xuanfengge.com/fe-books.html 前言 学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢? 除了在项目中学 ...

随机推荐

  1. JsPlumb在react的使用方法及介绍

    JsPlumb在react的使用方法及介绍 一．相关资料来源: 1.https://bitqiang.gitbooks.io/jsplumb/content/Chapter1_IMPORTS_AND_ ...

  2. sql：主键（primary key）和唯一索引（unique index）区别

    主键一定是唯一性索引,唯一性索引并不一定就是主键. 所谓主键就是能够唯一标识表中某一行的属性或属性组,一个表只能有一个主键,但可以有多个候选索引. 因为主键可以唯一标识某一行记录,所以可以确保执行数据 ...

  3. RabbitMQ(dotnet基本使用

    前言 RabbitMQ环境环境搭建及基本配置,在此不讨论.网上一大堆. NET环境下,Rabbit库可以在官网或NUGET上查找得到. 生产者 static void Main(string[] ar ...

  4. 让对象拥有状态——C#中的状态模式

    大家好,老胡又在博客和大家见面了,在聊今天的主角之前,老胡先给大家讲一个以前发生的故事.   真实的故事 当老胡还是小胡的时候,跟随团队一起开发一款游戏.这款游戏是一款末日生存类游戏,玩家可以 收集资 ...

  5. Java并发编程(06)：Lock机制下API用法详解

    本文源码:GitHub·点这里 || GitEE·点这里 一.Lock体系结构 1.基础接口简介 Lock加锁相关结构中涉及两个使用广泛的基础API:ReentrantLock类和Condition接 ...

  6. 资深前端工程师带你认识网页后缀html、htm、shtml、shtm有什么区别？

    每一个网页或者说是web页都有其固定的后缀名,不同的后缀名对应着不同的文件格式和不同的规则.协议.用法,最常见的web页的后缀名是.html和.htm,但这只是web页最基本的两种文件格式,今天我们来 ...

  7. Spring Cloud Alibaba系列（六）sentinel的实际应用

    一.sentinel的持久化配置 上一章中我们通过Dashboard来为Sentinel客户端设置各种各样的规则,但是这些规则默认是存放在内存中,极不稳定,无法用于生成环境,所以需要将其持久化. Da ...

  8. 小师妹学JVM之:cache line对代码性能的影响

    目录 简介 一个奇怪的现象 两个问题的答案 CPU cache line inc 和 add 总结 简介 读万卷书不如行万里路,讲了这么多assembly和JVM的原理与优化,今天我们来点不一样的实战 ...

  9. TP5中的缓存使用

    Thinkphp 5.0采用了 think\Cache 类来提供缓存支持 缓存支持采用驱动方式,所以缓存在使用之前,需要进行连接操作,也就是缓存初始化操作. 支持的缓存类型包括file.memcach ...

  10. 微信小程序开发中遇到的几个小问题

    本地图片不显示,开发工具运行是没问题的,但真机调试却显示不了 item.img = '/goods/img/图片.png' <image src="{{item.img}}" ...