第一步:
引入js和css文件我这里是直接引入的cdn,ionic是基于angular的,bundle.min.js把常用angular的js已经压缩到一起,可以直接引入.bundle.min.js,不需要引入其他js文件。
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
第二步:建立一个app,因为ionic是基于angular封装的,要使用他的事件和一些动态样式,需要建立angular的app同时注入ionic,
<script type="text/javascript">
angular.module("app", ['ionic']);
</script>
第三步:使用
要使用侧栏菜单,添加一个父元素<ion-side-menus>,一个中间内容 <ion-side-menu-content>,和一个或更多 <ion-side-menu> 指令。
属性:drag-content="true":是否被拖动
menu-toggle="right" :切换到右侧菜单
<ion-side-menu side="left" width="350">
<ion-content class="balanced-bg">
左侧测试
</ion-content>
</ion-side-menu>
设置左侧或者右侧菜单,width="350"为菜单宽度
<!--父级元素-->
<ion-side-menus drag-content="true">
<ion-side-menu-content>
<ion-header-bar style="background-color: #31c27c;height: 50px;">
<div class="row">
<a menu-toggle="right" class="icon ion-navicon-round col-20" style="color: white;font-size: 38px;margin-top: -3px;"></a>
<a menu-toggle="left" class="col-30" style="color: #FFFFFF;font-size: 25px;font-weight: bolder;line-height: 25px;">我的</a>
<a menu-toggle="left" class="col-30" style="color: #FFFFFF;font-size: 38px;line-height: 25px;word-spacing:60px;">音乐馆</a>
</div>
</ion-header-bar>
</ion-side-menu-content>
<ion-side-menu side="left" width="350">
<ion-content class="balanced-bg">
左侧测试
</ion-content>
</ion-side-menu>
<ion-side-menu side="right" width="350">
<ion-content class="balanced-bg">
右侧测试
</ion-content>
</ion-side-menu>
</ion-side-menus>
分享到:
相关推荐
ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容。通过把主要内容区域从一边拖动到另一边,来让左侧或右侧的侧栏菜单进行切换。 效果图如下所示: 用法 要使用侧栏菜单,添加一个父元素,一个中间内容 ,和一...
ionic 侧划菜单,可以通过在侧边划动拉出菜单,背景会有渐变效果,顶问导航条固定
使用ionic框架构建的具有侧边栏菜单的应用程序模板APP
make sure your computer install ionic 确保你的电脑安装了ionic2,不懂自行百度 second(其次): $ ionic start wechat_restaurant tutorial --v2 third(然后): find local file: /wechat_restaurant , then ...
IonicLab 官方下载地址被墙了。
ionic3仿京东商城源码,非常好用的ionic3学习参考资料。
ionic-sublime-plugin 支持sublime2、3版本
ireader##An Rss reader using ionic and localforage is a Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components, gestures, and ...使用方法下载压缩包,或者git clone下
一个移动端项目,示范Angular移动端组件库Ionic的基本用法,基于Ioinic 2.0,支持PWA
ionic模版源代码
Ionic2 开发的android demo ,含有下拉框,输入框等主流封装的控件,快速入门
ionic 5 best practices
简单的一个由ionic开发的商城demo,欢迎多提意见
Ionic 调用原生的功能是基于 Cordova,Cordova 提供了使用JavaScript 调用 Native 功能,ionic 自己也封装了一套漂亮的 CSS UI 库。 2.1.3 开发工具 Visual Studio Code 2.1.4 管理工具 Git 2.2 环境搭建 2.2.1...
Mobile App Development with Ionic 2: Cross-Platform Apps with Ionic, Angular, and Cordova by Chris Griffith English | 10 Apr. 2017 | ASIN: B06Y5Q24B2 | 310 Pages | AZW3 | 2.93 MB Learn how to build ...
ionic1.1.1文档史上最详细
这是一个封装好的ionic日期选择器,下载解压,点击date.html即可查看效果。
- 使用Ionic提供的UI 组件。Ionic本身是致力于建立统一的移动混合app构建平台,核心基础是Angular+Cordova。 - 通过Angular指令封装,以及预定义的CSS,提供了开箱即用的HTML5 Mobile组件。 - 构建与开发支持,能够...
ionic时间日期插件
注意:使用前请确保您已经安装部署好ionic环境 搭建绿色环境:Ionic_1.x 5分钟快速搭建绿色开发环境 手动搭建环境:Ionic_2.x 手动搭建开发环境 手拉手,“互” 助后会调整美化界面 以及尝试加入调试功能和结合参考...