ionic选项卡栏操作ion-tabsion-tabs是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。对于iOS，它会出现在屏幕的底部，Android会出现在屏幕的顶部(导航栏下面)。用法实例<ion-tabsclass="tabs-positivetabs-icon-only"><ion-tabtitl...

[阅读全文]

ionic加载动画ion-spinnerionSpinner提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。该图标采用的是SVG。用法<ion-spinnericon="spiral"></ion-spinner>//默认用法像大部分其他的ionic组件一样，spinner也可以使用...

[阅读全文]

ionic滑动框ion-slide-box滑动框是一个包含多页容器的组件，每页滑动或拖动切换：效果图如下：用法<ion-slide-boxon-slide-changed="slideHasChanged($index)"><ion-slide><divclass="boxblue"><h1>BLUE</h1></di...

[阅读全文]

ionic侧栏菜单一个容器元素包含侧边菜单和主要内容。通过把主要内容区域从一边拖动到另一边，来让左侧或右侧的侧栏菜单进行切换。效果图如下所示：用法要使用侧栏菜单，添加一个父元素<ion-side-menus>，一个中间内容<ion-side-menu-content>，和一个或更多<ion-side-menu>指令...

[阅读全文]

ionic滚动条ion-scrollion-scroll用于创建一个可滚动的容器。用法<ion-scroll[delegate-handle=""][direction=""][paging=""][on-refresh=""][on-scroll=""][scrollbar-x=""][scrollbar-y=""]...

[阅读全文]

ionic对话框$ionicPopupionic对话框服务允许程序创建、显示弹出窗口。$ionicPopup提供了3个方法：alert(),prompt(),以及confirm()。实例HTML代码<bodyclass="padding"ng-controller="PopupCtrl"><buttonclass="b...

[阅读全文]

ionic浮动框$ionicPopover$ionicPopover是一个可以浮在app内容上的一个视图框。可以实现以下功能点：在当前页面显示更多信息。选择一些工具或配置。在页面提供一个操作列表。方法fromTemplate(templateString,options)或fromTemplateUrl(templat...

[阅读全文]

ionic平台$ionicPlatform$ionicPlatform用来检测当前的平台，以及诸如在PhoneGap/Cordova中覆盖Android后退按钮。方法onHardwareBackButton(callback)有硬件的后退按钮的平台，可以用这种方法绑定到它。参数类型详情callbackfunction当...

[阅读全文]

ionic导航ion-nav-view当用户在你的app中浏览时，ionic能够检测到浏览历史。通过检测浏览历史，实现向左或向右滑动时可以正确转换视图。采用AngularUI路由器模块等应用程序接口可以分为不同的$state(状态)。Angular的核心为路由服务，URLs可以用来控制视图。AngularUI路由提供了...

[阅读全文]

ionic模态窗口$ionicModal$ionicModal可以遮住用户主界面的内容框。你可以在你的index文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变)。<scriptid="my-modal.html"type="text/ng-template"><ion-modal-vie...

[阅读全文]

ionic加载动作$ionicLoading是ionic默认的一个加载交互效果。里面的内容也是可以在模板里面修改。用法angular.module('LoadingApp',['ionic']).controller('LoadingCtrl',function($scope,$ionicLoading){$scope...

[阅读全文]

ionic列表操作列表是一个应用广泛在几乎所有移动app中的界面元素。ionList和ionItem这两个指令还支持多种多样的交互模式，比如移除其中的某一项，拖动重新排序，滑动编辑等等。用法<ion-list><ion-itemng-repeat="iteminitems">Hello,{{item}}!</ion-i...

[阅读全文]

ionic头部和底部ion-header-bar这个是固定在屏幕顶部的一个头部标题栏。如果给它加上'bar-subheader'这个样式，它就是副标题。用法<ion-header-baralign-title="left"class="bar-positive"><divclass="buttons"><buttonc...

[阅读全文]

ionic手势事件事件描述用法实例on-hold长按的时间是500毫秒。<buttonon-hold="onHold()"class="button">Test</button>尝试一下?on-tap这个是手势轻击事件，如果长按时间超过250毫秒，那就不是轻击了。。<buttonon-tap="onTap()"clas...

[阅读全文]

ionic切换开关操作以下实例中，通过切换不同开关checked显示不同的值，true为打开，false为关闭。HTML代码<ion-header-barclass="bar-positive"><h1class="title">开关切换</h1></ion-header-bar><ion-content><divcl...

[阅读全文]

ionic单选框操作实例中，根据选中的不同选项，显示不同的值。HTML代码<ion-header-barclass="bar-positive"><h1class="title">当选按钮</h1></ion-header-bar><ion-content><divclass="list"><divclass="ite...

[阅读全文]

ionic复选框ionic复选框（checkbox）与普通的HTML复选框没什么区别，以下实例演示了ionic复选框ion-checkbox的应用。<ion-checkboxng-model="isChecked">复选框标签</ion-checkbox>实例实例中，会根据复选框是否选中，修改checked值，true...

[阅读全文]

ionic下拉刷新在加载新数据的时候，我们需要实现下拉刷新效果，代码如下：实例HTML代码<bodyng-app="starter"ng-controller="actionsheetCtl"><ion-pane><ion-content><ion-refresherpulling-text="下拉刷新"on-refr...

[阅读全文]

ionic背景层我们经常需要在UI上，例如在弹出框、加载框、其他弹出层中显示或隐藏背景层。在组件中可以使用$ionicBackdrop.retain()来显示背景层，使用$ionicBackdrop.release()隐藏背景层。每次调用retain后，背景会一直显示，直到调用release消除背景层。实例HTML代码...

[阅读全文]

ionic上拉菜单(ActionSheet)上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。实例HTML代码<bodyng-app="starter"ng-controller="actionshe...

[阅读全文]

ionicicon(图标)ionic也默认提供了许多的图标，大概有700多个，针对Android和iOS有不同的样式。Ionicicons官网:http://ionicons.com/国内图标样式CDN地址：https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.m...

[阅读全文]

ionic颜色ionic提供了很多颜色的配置，当然你可以根据自己的需要自定义颜色。实例<ulclass="listcolor-list-demo"><liclass="itemdark">light<spanclass="color-demolight-bglight-border"></span></li><licl...

[阅读全文]

ionic网格(Grid)ionic的网格(Grid)和其他大部分框架有所不同，它采用了弹性盒子模型(FlexibleBoxModel)。而且在移动端，基本上的手机都支持。row样式指定行，col样式指定列。同等大小网格在带有row的样式的元素里如果包含了col的样式，col就会设置为同等大小。以下实例中row的样式包...

[阅读全文]

ionictab(选项卡)ionictab(选项卡)是水平排列的按钮或者链接，用以页面间导航的切换。它可以包含文字和图标的组合，是一种移动设备上流行的导航方法。以下选项卡容器使用了tabs类，每个选项卡使用tab-item类。默认情况下，选项卡是文本的，并没有图标。实例<divclass="tabs"><aclass=...

[阅读全文]

ionicselectionicselect的select相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。每个平台上的可选项样式都是不一样的，在PC电脑的浏览器上，你会看到传统的下拉界面，Android上会弹出单选按钮选项，iOS有个滚轮操作界面。实例<divclass="list"><divclass=...

[阅读全文]

ionicRangeionicRange是一个滑块控件，ionic为Range提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者Card。实例<divclass="range"><iclass="iconion-volume-low"></i><inputtype="range"name="volume...

[阅读全文]

ionic单选框ionic单选按钮与标准type="radio"的input元素类似。以下展示了现代app类型的单选按钮。每个item-radio中的type="radio"的input元素的name属性都相同。radio-icon类用于是否显示图标。ionic在单选项中使用了<label>元素，使其更易点击。实例<d...

[阅读全文]

ioniccheckbox（复选框）ionic里面的Checkbox和普通的Checkbox效果上其实相差不大，只是样式上有所不同。以下实例演示了多个复选框的列表。注意，每个选项的item类后需要添加item-checkbox类。复选框可以使用checkbox-assertive来指定颜色。<ulclass="list...

[阅读全文]

ionicToggle(切换开关)切换开关类似与HTML的checkbox标签，但它更易于在移动设备上使用。切换开关可以使用toggle-assertive来指定颜色。<labelclass="toggle"><inputtype="checkbox"><divclass="track"><divclass="hand...

[阅读全文]

ionic表单和输入框list类同样可以用于input元素。item-input和item类指定了文本框及其标签。输入框属性：placeholder以下实例中，默认为100%宽度（左右两侧没有边框），并使用placeholder属性设置输入字段预期值的提示信息。<divclass="list"><labelclass=...

[阅读全文]