ionic 教程 ionic 教程

ionic 教程

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

ionic 安装

ionic 安装 本站实例采用了ionic v1.0.1 版本,下载地址为:ionic-v1.0.1.zip。 ionic 最新版本下载地址:http://ionicframework.com/docs/overview/#download。 下载后解压压缩包,包含以下目录: css/ => 样式文件 fonts/ => ...
阅读全文
ionic 创建 APP ionic 教程

ionic 创建 APP

ionic 创建 APP 前面的章节中我们已经学会了 ionic 框架如何导入到项目中。 接下来我们将为大家介绍如何创建一个 ionic APP 应用。 ionic 创建 APP 使用 HTML、CSS 和 Javascript 来构建,所以我们可以创建一个 www 目录,并在目录下创建 index.html 文件,代码如下: <!DOCTYPE html> <html>...
阅读全文
ionic 头部与底部 ionic 教程

ionic 头部与底部

ionic 头部与底部 Header(头部) Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。 ionic 默认提供了许多种颜色样式,你可以调用不同的样式名,当然也可以自定义一个。 bar-light <div class="bar bar-header bar-light"> <h1 class="title">bar-light</h1...
阅读全文
ionic 按钮 ionic 教程

ionic 按钮

ionic 按钮 按钮是移动app不可或缺的一部分,不同风格的app,需要的不同按钮的样式。 默认情况下,按钮显示样式为:display: inline-block。 <button class="button"> Default </button> <button class="button button-light"> button-light ...
阅读全文
ionic 列表 ionic 教程

ionic 列表

ionic 列表 列表是一个应用广泛的界面元素,在所有移动app中几乎都会使用到。 列表可以是基本文字、按钮,开关,图标和缩略图等。 列表项可以是任何的HTML元素。容器元素需要list类,每个列表项需要使用item类。 ionList和ionItem可以很容易的支持各种交互方式,比如,滑动编辑,拖动排序,以及删除项。 基本用法: <ul class="list"> <...
阅读全文
ionic 卡片 ionic 教程

ionic 卡片

ionic 卡片 近年来卡片(card)的应用越来越流行,卡片提供了一个更好组织信息展示的工具。 针对移动端的应用,卡片会根据屏幕大小自适应大小。 我们可以很灵活的控制卡片的显示效果,甚至实现动画效果。 卡片一般放在页面顶部,当然也可以实现左右切换的功能。 <div class="card"> <div class="item item-text-wrap"> ...
阅读全文
ionic 表单和输入框 ionic 教程

ionic 表单和输入框

ionic 表单和输入框 list 类同样可以用于 input 元素。item-input 和 item 类指定了文本框及其标签。 输入框属性:placeholder 以下实例中,默认为100%宽度(左右两侧没有边框),并使用 placeholder 属性设置输入字段预期值的提示信息。 <div class="list"> <label class="item item...
阅读全文
ionic Toggle(切换开关) ionic 教程

ionic Toggle(切换开关)

ionic Toggle(切换开关) 切换开关类似与 HTML 的 checkbox 标签,但它更易于在移动设备上使用。 切换开关可以使用 toggle-assertive 来指定颜色。 <label class="toggle"> <input type="checkbox"> <div class="track"> <div c...
阅读全文
ionic 单选框 ionic 教程

ionic 单选框

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

ionic Range

ionic Range ionic Range 是一个滑块控件,ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card 。 实例 <div class="range"> <i class="icon ion-volume-low"></i> <input type="range" name="v...
阅读全文
ionic select ionic 教程

ionic select

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