侧边栏的使用范例：

<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. Centos7 上安装FastDFS

    Centos7 上安装 FastDFS 本文章摘抄于 风止鱼歇  博客地址:https://www.cnblogs.com/yufeng218/p/8111961.html 1.安装gcc(编译时需要 ...

  2. 洛谷 P2296 【寻找道路】

    这道题真的很女少啊 言归正传: 这道题其实就是考验的思路,读题后,我们发现对于某个点他所连接的点必须连接终点,那么我们直接反向存图,从终点进行bfs,可以找到未连接的点,然后对这些点所连接的点进行标记 ...

  3. 性能测试之Jmeter中场景设置与启动方式

    Jmeter场景设置与启动方式 性能测试场景是用来模拟模拟真实用户操作的工作单元,所以场景设计一定要切合用户的操作逻辑,jmeter主要是通过线程组配合其他组件来一起完成场景的设置. 线程组设置 Jm ...

  4. POJO类中布尔类型为啥不让用isXxx命名

    源码面前,了无秘密 <阿里开发规范泰山版>(2020.04.22)-->编程规约-->(一) 命名风格-->第8条规定: [强制]POJO 类中的任何布尔类型的变量,都不 ...

  5. Let's GO(二)

    人生苦短,Let's GO Let's GO(一) Let's GO(二) Let's GO(三) Let's GO(四) 今天我学了什么? 1. Map map:映射,使用散列表(hash)实现 m ...

  6. Pop!_OS安装与配置（四）：GNOME插件篇

    Pop!_OS安装与配置(四):GNOME插件篇 #0x0 效果图 #0x1 自动安装(不保证成功性) #0x2 OpenWeather #0x3 Topicons Plus #0x4 System- ...

  7. redux中的reducer为什么必须（最好）是纯函数

    为什么reducer最好是纯函数? 首先你得看看文档怎么说reducer的作用的,‘接收旧的 state 和 action,返回新的 state’,他起的是一个对数据做简单处理后返回state的作用. ...

  8. Idea 中 使用 devtools 热部署 spring-boot 应用 无需重新启动

    描述: 在我们使用spring-boot开发时,如果在开发者调试项目,边修改边调试运行,如果每次修改 java文件或者配置文件后都需要重新启动程序,如果程序启动比较慢的化,每次修改一点东西都要重新启动 ...

  9. VulnHub::DC-1

    实验环境 一共有五个flag,有多种方法去提权,我们最终目标是去拿到/root的flag.总的来说,难度不高,适合新人练手 渗透过程 0x01 信息搜集 由于不知道靶机IP地址,进行D段扫描,获得靶机 ...

  10. Activiti工作流--分布式实现方案

    一.运行环境 以下所有的描述都是基于Activiti的5.20.0.1版本 public interface ProcessEngine extends EngineServices { /** th ...