ionic 教程-OStack程序员社区-中国程序员成长平台

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›ionic 教程

ionic 教程

RSS

ionic 选项卡栏操作

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

作者：菜鸟教程小白 | 时间：2022-2-2 20:10 | 阅读：261 | 回复：0
ionic 导航

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

作者：菜鸟教程小白 | 时间：2022-2-2 20:09 | 阅读：275 | 回复：0
ionic 平台

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

作者：菜鸟教程小白 | 时间：2022-2-2 20:09 | 阅读：264 | 回复：0
ionic 浮动框

ionic 浮动框$ionicPopover$ionicPopover 是一个可以浮在app内容上的一个视图框。实例HTML 代码pbutton ng-click=openPopover($event)打开浮动框/button&gt_来自ionic 教程……

作者：菜鸟教程小白 | 时间：2022-2-2 20:09 | 阅读：294 | 回复：0
ionic 对话框

ionic 对话框$ionicPopupionic 对话框服务允许程序创建、显示弹出窗口。$ionicPopup 提供了3个方法：alert(), prompt(),以及 confirm() 。实例HTML 代码body class=padding ng-contro_来自ionic 教程 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:09 | 阅读：267 | 回复：0
ionic 滚动条

ionic 滚动条ion-scroll ion-scroll 用于创建一个可滚动的容器。用法ion-scroll[sc_来自ionic 教程……

作者：菜鸟教程小白 | 时间：2022-2-2 20:09 | 阅读：280 | 回复：0
ionic 侧栏菜单

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

作者：菜鸟教程小白 | 时间：2022-2-2 20:09 | 阅读：290 | 回复：0
ionic 滑动框

ionic 滑动框ion-slide-box 滑动框是一个包含多页容器的组件，每页滑动或拖动切换：效果图如下：用法ion-slide-box on-slide-changed=slideHasChanged($index) ion-slide&gt_来自ionic 教程 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:09 | 阅读：270 | 回复：0
ionic 加载动画

ionic 加载动画ion-spinnerionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。该图标采用的是SVG。用法ion-spinner icon=spiral/ion-spinner_来自ionic 教程 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:09 | 阅读：279 | 回复：0
ionic 复选框

ionic 复选框ionic 复选框（checkbox）与普通的 HTML 复选框没什么区别，以下实例演示了 ionic 复选框 ion-checkbox 的应用。ion-checkbox ng-model=isChecked复选框标签/ion-che_来自ionic 教程 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:08 | 阅读：271 | 回复：0
ionic 单选框操作

ionic 单选框操作实例中，根据选中的不同选项，显示不同的值。HTML 代码ion-header-bar class=bar-positive h1 class=title当选按钮/h1/_来自ionic 教程……

作者：菜鸟教程小白 | 时间：2022-2-2 20:08 | 阅读：298 | 回复：0
ionic 切换开关操作

ionic 切换开关操作以下实例中，通过切换不同开关 checked 显示不同的值，true 为打开，false 为关闭。HTML 代码ion-header-bar class=bar-positive h1 class=title&q_来自ionic 教程 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:08 | 阅读：259 | 回复：0
ionic 手势事件

ionic 手势事件事件描述用法实例on-hold长按的时间是500毫秒。button on-hold=onHold() class=button Test/button尝试一下 »on-tap这个是手势轻击事件，_来自ionic 教程……

作者：菜鸟教程小白 | 时间：2022-2-2 20:08 | 阅读：280 | 回复：0
ionic 头部和底部

ionic 头部和底部ion-header-bar这个是固定在屏幕顶部的一个头部标题栏。如果给它加上'bar-subheader' 这个样式，它就是副标题。用法ion-header-bar align-title=left class=ba_来自ionic 教程 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:08 | 阅读：273 | 回复：0
ionic 列表操作

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

作者：菜鸟教程小白 | 时间：2022-2-2 20:08 | 阅读：258 | 回复：0
ionic 加载动作

ionic 加载动作$ionicLoading 是 ionic 默认的一个加载交互效果。里面的内容也是可以在模板里面修改。用法angular.module('LoadingApp', ).controller('LoadingCtrl&#3_来自ionic 教程 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:08 | 阅读：264 | 回复：0
ionic 模态窗口

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

作者：菜鸟教程小白 | 时间：2022-2-2 20:08 | 阅读：285 | 回复：0
ionic tab(选项卡)

ionic tab(选项卡)ionic tab(选项卡) 是水平排列的按钮或者链接，用以页面间导航的切换。它可以包含文字和图标的组合，是一种移动设备上流行的导航方法。以下选项卡容器使用了 tabs 类，每个选项卡使用 tab-item 类 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:07 | 阅读：244 | 回复：0
ionic 网格(Grid)

ionic 网格(Grid)ionic 的网格(Grid)和其他大部分框架有所不同，它采用了弹性盒子模型(Flexible Box Model) 。而且在移动端，基本上的手机都支持。row 样式指定行，col 样式指定列。同等大小网格在带有 row 的样式的 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:07 | 阅读：228 | 回复：0
ionic 颜色

ionic 颜色ionic 提供了很多颜色的配置，当然你可以根据自己的需要自定义颜色。ul class=list color-list-demoli class=item dark light s_来自ionic 教程……

作者：菜鸟教程小白 | 时间：2022-2-2 20:07 | 阅读：276 | 回复：0
ionic icon(图标)

ionic icon(图标)ionic 也默认提供了许多的图标，大概有500多个。用法也非常的简单：i class=icon ion-star/i图标样式CDN地址：//www.w3cschool.cn/statics/demosource/i_来自ionic 教程 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:07 | 阅读：281 | 回复：0
ionic JavaScript

ionic JavaScript_来自ionic 教程……

作者：菜鸟教程小白 | 时间：2022-2-2 20:07 | 阅读：276 | 回复：0
ionic 上拉菜单

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

作者：菜鸟教程小白 | 时间：2022-2-2 20:07 | 阅读：278 | 回复：0
ionic 背景层

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

作者：菜鸟教程小白 | 时间：2022-2-2 20:07 | 阅读：293 | 回复：0
ionic 下拉刷新

ionic 下拉刷新在加载新数据的时候，我们需要实现下拉刷新效果，代码如下：实例HTML 代码body ng-app=starter ng-controller=actionsheetCtl ion-pane_来自ionic 教程……

作者：菜鸟教程小白 | 时间：2022-2-2 20:07 | 阅读：252 | 回复：0
ionic 列表

ionic 列表列表是一个应用广泛的界面元素，在所有移动app中几乎都会使用到。列表可以是基本文字、按钮，开关，图标和缩略图等。列表项可以是任何的HTML元素。容器元素需要list类，每个列表项需要使用item类。ionList ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:06 | 阅读：238 | 回复：0
ionic 卡片

ionic 卡片近年来卡片(card)的应用越来越流行，卡片提供了一个更好组织信息展示的工具。针对移动端的应用，卡片会根据屏幕大小自适应大小。我们可以很灵活的控制卡片的显示效果，甚至实现动画效果。卡片一般放在页面 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:06 | 阅读：233 | 回复：0
ionic 表单和输入框

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

作者：菜鸟教程小白 | 时间：2022-2-2 20:06 | 阅读：245 | 回复：0
ionic Toggle

ionic Toggle(切换开关)切换开关类似与 HTML 的 checkbox 标签，但它更易于在移动设备上使用。切换开关可以使用 toggle-assertive 来指定颜色。label class=toggle input type=&q_来自ionic 教程 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:06 | 阅读：265 | 回复：0
ionic checkbox

ionic checkbox（复选框）ionic 里面的 Checkbox 和普通的 Checkbox 效果上其实相差不大，只是样式上有所不同。以下实例演示了多个复选框的列表。注意，每个选项的 item 类后需要添加 item-checkbox 类。复选框可以 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:06 | 阅读：239 | 回复：0
ionic 单选框

ionic 单选框ionic 当选按钮与标准 type=radio 的 input元素类似。以下展示了现代app类型的单选按钮。每个 item-radio 中的 type=radio 的 input 元素的 name 属性都相同。radio-icon_来自ionic 教程 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:06 | 阅读：242 | 回复：0
ionic Range

ionic Rangeionic Range 是一个滑块控件，ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card 。实例div class=range i class=icon io_来自ionic 教程 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:06 | 阅读：245 | 回复：0
ionic select

ionic selectionic select 的 select 相比原生的要更加美观些。但是弹出的可选选项样式是浏览器默认的。每个平台上的可选项样式都是不一样的，在PC电脑的浏览器上，你会看到传统的下拉界面，Android 上会弹出单选按 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:06 | 阅读：261 | 回复：0
ionic 教程

ionic 教程ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。ionic 主要关注外观和体验 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:05 | 阅读：265 | 回复：0
ionic 安装

ionic 安装本站实例采用了ionic v1.0.1 版本，下载地址为：ionic-v1.0.1.zip。ionic 最新版本下载地址：http://ionicframework.com/docs/overview/#download。下载后解压压缩包，包含以下目录：css/_来自ionic 教程 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:05 | 阅读：262 | 回复：0
ionic 创建 APP

ionic 创建 APP前面的章节中我们已经学会了 ionic 框架如何导入到项目中。接下来我们将为大家介绍如何创建一个 ionic APP 应用。ionic 创建 APP 使用 HTML、CSS 和 Javascript 来构建，所以我们可以创建一个 www 目 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:05 | 阅读：221 | 回复：0
ionic 头部与底部

ionic 头部与底部Header(头部)Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。ionic 默认提供了许多种颜色样式，你可以调用不同的样式名，当然也可以自定义一个。bar-lightdiv class=bar bar-header b ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:05 | 阅读：233 | 回复：0
ionic 按钮

ionic 按钮按钮是移动app不可或缺的一部分，不同风格的app，需要的不同按钮的样式。默认情况下，按钮显示样式为：display: inline-block。button class=button Default/button&l_来自ionic 教程 ...……

作者：菜鸟教程小白 | 时间：2022-2-2 20:05 | 阅读：243 | 回复：0

客服电话

电子邮件

ionic 教程

关于我们

产品与服务

解决方案

139-2527-9053