CodeNodeX AI
Sign upWrite

Learning Path

Ionic tutorials

Browse tutorials and chapters for Ionic.

Mobile & cross-platform

iOS, Android, Flutter, Ionic, Electron, and cross-platform clients.

Tutorials

38

TAXONOMYMobile & cross-platformFetched/Ionic

ionic 教程

ionic 教程 ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。 ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybrid 模式的 HTML5 移动应用程序开发。 ionic是一个轻量的手机UI库..

TUTORIALMobile & cross-platformFetched/Ionic

ionic 上拉菜单(ActionSheet)

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

TUTORIALMobile & cross-platformFetched/Ionic

ionic 按钮

ionic 按钮 按钮是移动app不可或缺的一部分，不同风格的app，需要的不同按钮的样式。 默认情况下，按钮显示样式为：display: inline-block。 Default button-light button-stable button-positive button-calm button-balanced button-energized b..

TUTORIALMobile & cross-platformFetched/Ionic

ionic 卡片

ionic 卡片 近年来卡片(card)的应用越来越流行，卡片提供了一个更好组织信息展示的工具。 针对移动端的应用，卡片会根据屏幕大小自适应大小。 我们可以很灵活的控制卡片的显示效果，甚至实现动画效果。 卡片一般放在页面顶部，当然也可以实现左右切换的功能。 基本卡片，包含了文本信息。 尝试一下 » 卡片(card)默认样式带有box-shadow(阴影)，由于性能的原因，和他类似的元素像 list list-..

TUTORIALMobile & cross-platformFetched/Ionic

ionic checkbox

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

TUTORIALMobile & cross-platformFetched/Ionic

ionic 颜色

ionic 颜色 ionic 提供了很多颜色的配置，当然你可以根据自己的需要自定义颜色。 实例 [mycode3 type='html'] light stable positive calm balanced energized assertive ..

TUTORIALMobile & cross-platformFetched/Ionic

ionic 创建 APP

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

TUTORIALMobile & cross-platformFetched/Ionic

ionic 表单和输入框

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

TUTORIALMobile & cross-platformFetched/Ionic

ionic 手势事件

ionic 手势事件 事件 描述 用法 实例 on-hold 长按的时间是500毫秒。 Test 尝试一下 » on-tap 这个是手势轻击事件，如果长按时间超过250毫秒，那就不是轻击了。。 Test 尝试一下 » on-double-tap 手双击屏幕事件 Test 尝试一下 » on-touch 这个和 on-tap 还是..

TUTORIALMobile & cross-platformFetched/Ionic

ionic 网格(Grid)

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

TUTORIALMobile & cross-platformFetched/Ionic

ionic 头部与底部

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

TUTORIALMobile & cross-platformFetched/Ionic

ionic icon(图标)

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

TUTORIALMobile & cross-platformFetched/Ionic

ionic 安装

ionic 安装 本站实例采用了ionic v1.3.2 版本，使用的 CDN 库地址： ionic 最新版本下载地址：http://ionicframework.com/docs/overview/#download。 下载后解压压缩包，包含以下目录： css/ => 样式文件 fonts/ => 字体文件 js/ ..

TUTORIALMobile & cross-platformFetched/Ionic

ionic 复选框

ionic 复选框 ionic 复选框（checkbox）与普通的 HTML 复选框没什么区别，以下实例演示了 ionic 复选框 ion-checkbox 的应用。 复选框标签 实例实例中，会根据复选框是否选中，修改 checked 值，true 为选中， false 为未选中。 HTML 代码 复选框 {{ item.text }} ..

TUTORIALMobile & cross-platformFetched/Ionic

ionic 头部和底部

ionic 头部和底部 ion-header-bar 这个是固定在屏幕顶部的一个头部标题栏。如果给它加上'bar-subheader' 这个样式，它就是副标题。 用法 Left Button Title! Right Button Some content! API 属性 类型 描述 ..

TUTORIALMobile & cross-platformFetched/Ionic

ionic 列表操作

ionic 列表操作 列表是一个应用广泛在几乎所有移动app中的界面元素。ionList 和 ionItem 这两个指令还支持多种多样的交互模式，比如移除其中的某一项，拖动重新排序，滑动编辑等等。 用法 Hello, {{item}}! 高级用法: 缩略图，删除按钮，重新排序，滑动 {{item.title}} {{item.description}} ..

TUTORIALMobile & cross-platformFetched/Ionic

ionic 模态窗口

ionic 模态窗口 $ionicModal $ionicModal 可以遮住用户主界面的内容框。 你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变)。 My Modal title Hello! 然后你就可以在你的 Controller 里面的注入 $ionicModal 。然后调用你刚刚写入..

TUTORIALMobile & cross-platformFetched/Ionic

ionic 导航

ionic 导航 ion-nav-view 当用户在你的app中浏览时，ionic能够检测到浏览历史。通过检测浏览历史，实现向左或向右滑动时可以正确转换视图。 采用AngularUI路由器模块等应用程序接口可以分为不同的$state(状态)。Angular的核心为路由服务，URLs可以用来控制视图。 AngularUI路由提供了一个更强大的状态管理，即状态可以被命名，嵌套， 以及合并视图，允许一个以上模板呈现在同一个页面。 此外，每..

TUTORIALMobile & cross-platformFetched/Ionic

ionic 单选框操作

ionic 单选框操作 实例中，根据选中的不同选项，显示不同的值。 HTML 代码 当选按钮 选取的值为: {{ data.clientSide }} {{ item.text }} Serverside, Selected Value: {{ data.serverSid..

TUTORIALMobile & cross-platformFetched/Ionic

ionic 下拉刷新

ionic 下拉刷新 在加载新数据的时候，我们需要实现下拉刷新效果，代码如下： 实例 HTML 代码 JavaScript 代码 angular.module('starter', ['ionic']) .run(..

TUTORIALMobile & cross-platformFetched/Ionic

ionic 侧栏菜单

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

TUTORIALMobile & cross-platformFetched/Ionic

ionic 滑动框

ionic 滑动框 ion-slide-box 滑动框是一个包含多页容器的组件，每页滑动或拖动切换： 效果图如下： 用法 BLUE YELLOW PINK API 属性 类型 详情 delegate-handle ..

TUTORIALMobile & cross-platformFetched/Ionic

ionic 加载动画

ionic 加载动画 ion-spinner ionSpinner 提供了许多种旋转加载的动画图标。当你的界面加载时，你就可以呈现给用户相应的加载图标。该图标采用的是SVG。 用法 //默认用法 像大部分其他的ionic组件一样，spinner也可以使用ionic的标准颜色命名规则，就像下面这样： 实例 HTML 代码 ..

TUTORIALMobile & cross-platformFetched/Ionic

ionic 选项卡栏操作

ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏。可以通过点击选项来切换页面。对于 iOS，它会出现在屏幕的底部，Android会出现在屏幕的顶部(导航栏下面)。 用法 实例 [mycode3 type='html'] [/mycode3] 尝试一下 » 效果如下所示： API ..