《io》专题

主要内容：实例列表是一个应用广泛在几乎所有移动app中的界面元素。ionList 和 ionItem 这两个指令还支持多种多样的交互模式，比如移除其中的某一项，拖动重新排序，滑动编辑等等。 用法 高级用法: 缩略图，删除按钮，重新排序，滑动 API 属性 类型 详情 delegate-handle (可选) 该句柄定义带有的列表。 show-delete (可选) 列表项的删除按钮当前是显示还是隐藏。 show

主要内容：ion-header-bar,ion-footer-barion-header-bar 这个是固定在屏幕顶部的一个头部标题栏。如果给它加上'bar-subheader' 这个样式，它就是副标题。 用法 API 属性 类型 描述 align-title (optional) 这个是对齐 title 的。如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。 no

主要内容：$ionicGesture事件 描述 用法 实例 on-hold 长按的时间是500毫秒。 尝试一下 » on-tap 这个是手势轻击事件，如果长按时间超过250毫秒，那就不是轻击了。。 尝试一下 » on-double-tap 手双击屏幕事件 尝试一下 » on-touch 这个和 on-tap 还是有区别的，这个是立即执行，而且是用户点击立马执行。不用等待 touchend/mouseup 。 尝试一下 » on-re

以下实例中，通过切换不同开关 checked 显示不同的值，true 为打开，false 为关闭。 HTML 代码 由于pre标签冲突，实例中的 pre 已替换为 div标签，具体可以在"尝试一下"中查看。 JavaScript 代码 css 代码： 尝试一下 » 效果如下所示：

实例中，根据选中的不同选项，显示不同的值。 HTML 代码 JavaScript 代码 css 代码： 尝试一下 » 效果如下所示：

主要内容：实例ionic 复选框（checkbox）与普通的 HTML 复选框没什么区别，以下实例演示了 ionic 复选框 ion-checkbox 的应用。 实例 实例中，会根据复选框是否选中，修改 checked 值，true 为选中， false 为未选中。 HTML 代码 JavaScript 代码 css 代码： 尝试一下 » 效果如下所示：

主要内容：实例在加载新数据的时候，我们需要实现下拉刷新效果，代码如下： 实例 HTML 代码 JavaScript 代码 item.json 文件数据： 尝试一下 » 效果如下所示：

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

主要内容：实例上拉菜单(ActionSheet)通过往上弹出的框，来让用户选择选项。 非常危险的选项会以高亮的红色来让人第一时间识别。你可以通过点击取消按钮或者点击空白的地方来让它消失。 实例 HTML 代码 JavaScript 代码 在代码中触发上拉菜单，需要在你的 angular 控制器中使用 $ionicActionSheet 服务： 尝试一下 » 运行效果如下图：

主要内容：实例,实例,iOS 风格图标,Android 风格图标ionic 也默认提供了许多的图标，大概有 700 多个，针对 Android 和 iOS 有不同的样式。 Ionic icons 官网: http://ionicons.com/ 国内图标样式 CDN 地址：https://cdn.staticfile.org/ionicons/2.0.1/css/ionicons.min.css。 用法也非常的简单，由一个 icon 类及指定图标类组成，如：

主要内容：实例ionic 提供了很多颜色的配置，当然你可以根据自己的需要自定义颜色。 实例 <ul class="list color-list-demo"> <li class="item dark"> light <span class="color-demo light-bg light-border"></span> </li> <li class="item stable-dark"> stable

主要内容：纵向对齐网格,响应式网格ionic 的网格(Grid)和其他大部分框架有所不同，它采用了弹性盒子模型(Flexible Box Model) 。而且在移动端，基本上的手机都支持。row 样式指定行，col 样式指定列。 同等大小网格 在带有 row 的样式的元素里如果包含了 col 的样式，col 就会设置为同等大小。 以下实例中 row 的样式包含了 5 个 col 样式，每个 col 的宽度为 20%。 尝试一下 »

ionic tab(选项卡) 是水平排列的按钮或者链接，用以页面间导航的切换。它可以包含文字和图标的组合，是一种移动设备上流行的导航方法。 以下选项卡容器使用了 tabs 类，每个选项卡使用 tab-item 类。默认情况下，选项卡是文本的，并没有图标。 实例 尝试一下 » 默认情况，选项卡颜色为默认，你可以设置以下不同颜色样式：tabs-default ，tabs-light ，tabs-sta

ionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。 每个平台上的可选项样式都是不一样的，在PC电脑的浏览器上，你会看到传统的下拉界面，Android 上会弹出单选按钮选项，iOS 有个滚轮操作界面。 实例 尝试一下 » 运行效果如下：

ionic Range 是一个滑块控件，ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card 。 实例 尝试一下 » 运行效果如下：