ionic 教程

ionic 安装

5

xubiao.zhuang 发布于 2016-05-13

ionic 安装 本站实例采用了ionic v1.0.1 版本,下载地址为:ionic-v1.0.1.zip。 ionic 最新版本下载地址:http://ionicframework.com/docs/overview/#download。 下载后解压压缩包,包含以下目录: c...

阅读(135)评论(0)赞 (0)

ionic 创建 APP

1

hellas 发布于 2016-05-13

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

阅读(189)评论(0)赞 (0)

ionic 头部与底部

xiaoli.he 发布于 2016-05-13

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

阅读(110)评论(0)赞 (0)

ionic 按钮

songhua.gao 发布于 2016-05-13

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

阅读(150)评论(0)赞 (0)

ionic 列表

xirruiqiang 发布于 2016-05-13

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

阅读(121)评论(0)赞 (0)

ionic 卡片

darida 发布于 2016-05-13

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

阅读(149)评论(0)赞 (0)

ionic 表单和输入框

xiaoli.wang 发布于 2016-05-13

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

阅读(135)评论(0)赞 (0)

ionic Toggle(切换开关)

darida 发布于 2016-05-13

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

阅读(147)评论(0)赞 (0)

ionic 单选框

changyuan.xu 发布于 2016-05-13

ionic 单选框 ionic 当选按钮与标准 type=”radio” 的 input元素类似。以下展示了现代app类型的单选按钮。 每个 item-radio 中的 type=”radio” 的 input 元素的 name 属...

阅读(111)评论(0)赞 (0)

ionic Range

xubiao.zhuang 发布于 2016-05-13

ionic Range ionic Range 是一个滑块控件,ionic 为 Range 提供了很多种默认的样式。而且你可以在许多种元素里使用它比如列表或者 Card 。 实例 <div class="range"> <i class="icon ion-vo...

阅读(125)评论(0)赞 (0)

ionic select

dulong 发布于 2016-05-13

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

阅读(137)评论(0)赞 (0)

ionic tab(选项卡)

xirruiqiang 发布于 2016-05-13

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

阅读(129)评论(0)赞 (0)

ionic 网格(Grid)

刘莉莉 发布于 2016-05-13

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

阅读(149)评论(0)赞 (0)

ionic 颜色

xubiao.zhuang 发布于 2016-05-13

ionic 颜色 ionic 提供了很多颜色的配置,当然你可以根据自己的需要自定义颜色。 <ul class="list color-list-demo"> <li class="item dark"> light <span class="colo...

阅读(124)评论(0)赞 (0)

ionic icon(图标)

zhuangli 发布于 2016-05-13

ionic icon(图标) ionic 也默认提供了许多的图标,大概有500多个。用法也非常的简单: <i class="icon ion-star"></i> 图标样式CDN地址:http://www.runoob.com/static/ionic/c...

阅读(132)评论(0)赞 (0)

ionic icon(图标)

1

likai 发布于 2016-05-13

ionic icon(图标) ionic 也默认提供了许多的图标,大概有500多个。用法也非常的简单: <i class="icon ion-star"></i> 图标样式CDN地址:http://www.runoob.com/static/ionic/c...

阅读(92)评论(0)赞 (0)

ionic 上拉菜单(ActionSheet)

1

yeseng 发布于 2016-05-13

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

阅读(127)评论(0)赞 (0)