ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。 对于 iOS，它会出现在屏幕的底部，Android会出现在屏幕的顶部(导航栏下面)。 用法
ionic 加载动画 ion-spinner ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。 该图标采用的是SVG。 用法 ion-spinner icon="spiral"/ion-spinner
ionic 滑动框 ion-slide-box 滑动框是一个包含多页容器的组件，每页滑动或拖动切换： 效果图如下： 用法 ion-slide-box on-slide-changed="slideHasChanged($index)" ion-slide div class="box blue"h1BLUE/h1/div /ion-
ionic 侧栏菜单 一个容器元素包含侧边菜单和主要内容。通过把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换。 效果图如下所示： 用法 要使用侧栏菜单，添加
ionic 滚动条 ion-scroll ion-scroll 用于创建一个可滚动的容器。 用法 ion-scroll[delegate-handle=""][direction=""][paging=""][on-refresh=""][on-scroll=""][scrollbar-x=""][scrollbar-y=""][zooming=""][min-zoom=""][max-zoom=""]..
ionic 对话框 $ionicPopup ionic 对话框服务允许程序创建、显示弹出窗口。 $ionicPopup 提供了3个方法：alert(), prompt(),以及 confirm() 。 实例 HTML 代码 body class="padding" ng-controller="PopupCtrl"button clas
ionic 浮动框 $ionicPopover $ionicPopover 是一个可以浮在app内容上的一个视图框。 可以实现以下功能点： 在当前页面显示更多信息。 选择一些工具或配置。 在页面提供一个操作列表。 方法
ionic 平台 $ionicPlatform $ionicPlatform 用来检测当前的平台，以及诸如在PhoneGap/Cordova中覆盖Android后退按钮。 方法 onHardwareBackButton(callback) 有硬件的后退按钮的平台，可以用这种方法绑定到它
ionic 导航 ion-nav-view 当用户在你的app中浏览时，ionic能够检测到浏览历史。通过检测浏览历史，实现向左或向右滑动时可以正确转换视图。 采用AngularUI路由器模块等应用程序接口可以分为
ionic 模态窗口 $ionicModal $ionicModal 可以遮住用户主界面的内容框。 你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变)。 script id=
ionic 加载动作 $ionicLoading 是 ionic 默认的一个加载交互效果。里面的内容也是可以在模板里面修改。 用法 angular.module('LoadingApp', ['ionic']).controller('LoadingCtrl', function($scope, $ionicLoading) { $sc
ionic 列表操作 列表是一个应用广泛在几乎所有移动app中的界面元素。ionList 和 ionItem 这两个指令还支持多种多样的交互模式，比如移除其中的某一项，拖动重新排序，滑动编辑等等。 用
ionic 头部和底部 ion-header-bar 这个是固定在屏幕顶部的一个头部标题栏。如果给它加上'bar-subheader' 这个样式，它就是副标题。 用法 ion-header-bar align-title="left" class="bar-positive" div class="but
ionic 手势事件 事件 描述 用法 实例 on-hold 长按的时间是500毫秒。 button on-hold="onHold()" class="button"Test/button 尝试一下 » on-tap 这个是手势轻击事件，如果长按时间超过250毫秒，那就不是轻击
ionic 切换开关操作 以下实例中，通过切换不同开关 checked 显示不同的值，true 为打开，false 为关闭。 HTML 代码 ion-header-bar class="bar-positive" h1 class="title"开关切换/h1/ion-header-bar ion-content d
ionic 单选框操作 实例中，根据选中的不同选项，显示不同的值。 HTML 代码 ion-header-bar class="bar-positive" h1 class="title"当选按钮/h1/ion-header-bar ion-content div class="list" div class="item item-divider" 选
ionic 复选框 ionic 复选框（checkbox）与普通的 HTML 复选框没什么区别，以下实例演示了 ionic 复选框 ion-checkbox 的应用。 ion-checkbox ng-model="isChecked"复选框标签/ion-checkbox 实例 实例中，会根据
ionic 下拉刷新 在加载新数据的时候，我们需要实现下拉刷新效果，代码如下： 实例 HTML 代码 body ng-app="starter" ng-controller="actionsheetCtl" ion-pane ion-content ion-refresher pulling-text="下拉刷新" on
ionic 背景层 我们经常需要在 UI 上，例如在弹出框、加载框、其他弹出层中显示或隐藏背景层。 在组件中可以使用$ionicBackdrop.retain()来显示背景层，使用$ionicBackdrop.release()隐藏背景层。
ionic 上拉菜单(ActionSheet) 上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。 非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方
ionic icon(图标) ionic 也默认提供了许多的图标，大概有 700 多个，针对 Android 和 iOS 有不同的样式。 Ionic icons 官网: http://ionicons.com/ 国内图标样式 CDN 地址：https://cdn.staticfile.org/ionicons/2.0
ionic 颜色 ionic 提供了很多颜色的配置，当然你可以根据自己的需要自定义颜色。 实例 ul class = list color-list-demo li class = item dark light span class = color-demo light-bg light-border / span / li li class =
ionic 网格(Grid) ionic 的网格(Grid)和其他大部分框架有所不同，它采用了弹性盒子模型(Flexible Box Model) 。而且在移动端，基本上的手机都支持。row 样式指定行，col 样式指定列。 同等大小网
ionic tab(选项卡) ionic tab(选项卡) 是水平排列的按钮或者链接，用以页面间导航的切换。它可以包含文字和图标的组合，是一种移动设备上流行的导航方法。 以下选项卡容器使用了 tabs 类
ionic select ionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。 每个平台上的可选项样式都是不一样的，在PC电脑的浏览器上，你会看到传统的下拉界