Ionic

两天的时间

day1：认识ionic、ionic的常见的样式类

day2：ionic基于ng封装的指令和服务

day3、4：移动端的项目

一、Ionic概述

已经掌握了实现混合编程的基本技能，但是所实现的hybridapp ①与原生应用交互体验差太大 ②功能比较少（无法实现与设备底层的交互）

？？ ionic做一个移动端的框架，可以让界面美观，让功能更强大。

官网

图标的官网

what？Ionic是一个移动端的开源的ui类框架，

ionic = ng(数据处理)+cordova(phonegap提供了js接口允许调用设备底层)+ui库(样式类、基于ng封装的指令和服务)+uiRouter(类似ngRoute的路由模块)

GUI 图形化

CLI 命令行

why？

Ionic完美的融合了ng、cordova（学习成本低）

Ionic提供了非常的漂亮的ui库（包括字体图标、丰富的样式类）

Ionic提供了基于CLI(command line interface)的操作方式

Ionic的性能比较好

where？

移动端的app（WebApp，配合WebView实现hybridApp）

how？

两种方式：

方式1

直接引入对应的js css fonts文件

方式2

安装nodejs

安装corodva和ionic

npm install -g cordova ionic

创建项目 ionic start myApp tabs

启动项目 cd myApp ;ionic serve

二、使用Ionic的基本页面结构

页头

<ion-header-bar> </ion-header-bar>

正文

<ion-content> </ion-content>

页尾

<ion-footer-bar> </ion-footer-bar>

前提：创建的自定义模块，必须指定依赖ionic这个模块，这样ionic所提供的指令或者服务，才可以在自定义模块的范围内去调用。

三、常见的颜色的使用

哪些？

light 浅灰色

stable 灰色

positive 天蓝色

calm 湖蓝色

balanced 绿色

enerygized 黄色

assertive 红色

royal 紫色

dark 黑色

用在哪些地方？

前景色、背景色、边框

练习：通过ionic实现一个移动端的页面（页头、正文、页尾，在正文中显示一个有3条数据列表，页头页尾红色）

四、button

button 调整按钮的大小，加上了圆角效果

button-positive 天蓝色....

button-block 宽度

button-large/button-small 大小

button-outline 边框

button-clear 只显示文本

icon-left 图标在按钮文本的左边

ion-home 具体的图标

button-bar 将容器中的按钮进行宽度的均等分

练习：使用ionic提供的给button使用的样式类实现以下效果：

第一行：显示一个大按钮 一个小按钮

第二行：显示一个按钮组，有3个按钮，均等分宽度，第一个按钮图标在左边（ion-person），第二个按钮图标在右边（ion-gear-a），第三个按钮只显示文本内容

五、list

list/item 让指定的容器和列表项目具有列表的外观显示效果

item-divider 用在item中，实现一个比较醒目的分隔效果，字体加粗，背景色变成灰色

list-inset 用在list中，实现一个嵌入的效果（距离上下左右都会margin）

item-icon-left/right 用在item中，指定一个图标显示在列表项的左边或者右边或者两边都显示

badge 计数气泡(徽章)，可以用在item中，通过一个span指定class='badge badge-assertive'

item-button-left/right,用在item中，给列表项指定一个可以点击的按钮

在ionic提供的样式类中，列表的实现有3种方式：

①图标列表 (图标比较小)

<li class='item item-icon-left'></li>

②联系人列表(图片要比图标大 比缩略图小)

<li class='item item-avatar'></li>

③缩略图列表

<li class='item item-thumbnail-left'></li>

六、card 卡片

提供的样式类 主要是用来进行数据的展示

<div class="card">

<div class="item item-divider">

header

</div>

<div class='item'>

data...

</div>

<div class="item item-divider">

footer

</div>

</div>

七、form

表单中放置label的四种方式：

①placeholder labels

<label class="item item-input">

<input type='text' placeholder="输入用户名'/>

</label>

②inline labels

<label class="item item-input">

<span class='input-label'>请输入用户名</span>

<input type='text' placeholder="输入用户名'/>

</label>

③stacked labels

<label class="item item-input item-stacked-label">

<span class='input-label'>请输入用户名</span>

<input type='text' placeholder="输入用户名'/>

</label>

④floating labels

<label class="item item-input item-floating-label">

<span class='input-label'>请输入用户名</span>

<input type='text' placeholder="输入用户名'/>

</label>

item-select

item-toggle

ionList ionToggle ionCheckbox ionRadio

八、tabs 选项卡(标签页)

tabs/tabs-icon-left/tabs-icon-top.../

tab-item

九、grid

row/col 指定是一个行或者一个列

指定具体的列的宽度：

.col-10 10%

.col-20 20%

.col-25 25%

.col-33 33.3333%

.col-50 50%

.col-67 66.6666%

.col-75 75%

.col-80 80%

.col-90 90%

设置距离左边的这一列的偏移量

.col-offset-10 10%

.col-offset-20 20%

.col-offset-25 25%

.col-offset-33 33.3333%

.col-offset-50 50%

.col-offset-67 66.6666%

.col-offset-75 75%

.col-offset-80 80%

.col-offset-90 90%

列之间垂直对齐的方式：

默认col-top

col-center col-bottom

通过行进行列对齐的统一的设置：

row-top/row-center/row-bottom