《Web前端开发技术》_第11章 HTML5移动APP框架Ionic.pptxVIP

本讲内容1、Ionic简介2、Ionic命令行工具3、CSS组件4、配置Ionic5、Ionic指令和服务

介绍Ionic是一个使用HTML5、CSS3、JavaScript技术实现的功能强大的移动APP开发框架Ionic主要聚焦在视觉感官上及UI交互Ionic专注于应用前段开发Ionic需要AngularJS才可以发挥潜能，如果只使用Ionic的CSS部分将会失去好的UI交互、手势处理、动画等

介绍Ionic下载：/1.3.1/ionic-v1.3.1.zip与Cordova或PhoneGap融合，只需要将Ionic的CSS文件和JS文件复制到对应的Cordova工程中即可开始使用Ionic是开源框架，遵循MIT协议安装Ionic客户端：npminstall–gionic客户端创建、编译、运行更加方便查看帮助：ionic--help或ionichelp更新ionic库：ioniclibupdate

Ionic命令行工具安装Ionic：npminstall–gionic升级：ioniclibupdate启动一个APP：ionicstartmyapp[template]添加平台支持：ionicplatformaddiosandroid

Ionic命令行工具通过浏览器方式启动访问：Ionicserve指定地址：Ionicserve–address6平台运行：Ionicrunandroid

样式库页眉和页脚：bar、bar-header、bar-*，*代表了各种颜色：light、stable、positive、calm、balanced、energized、assertive、royal、dark二级页眉：bar-subheader内容，ionContent指令实现，如果包含页眉和页脚必须有has-header、has-suheader、has-footer、has-subfooter如果页脚没有标题希望按钮放在右边，只要按钮添加pull-right类即可

样式库按钮：button、button-block、button-*全宽按钮：button-full按钮尺寸：button-large、button-small轮廓按钮：button-outline纯文本按钮：button-clear图标按钮：icon、icon-*，这里*表示图标类型，如star、settings、left、right、gear-a、navicon、home、chevron-left、chevron-right

样式库按钮条：button-bar列表：list、item、分割项（item-divider)列表图标项：item-icon-left、item-icon-right列表其他：item-note、徽章（badge）、badge-assertive列表按钮项：item-button-right、item-button-left列表有微图项：item-avatar

样式库列表有缩略图项：item-thumbnail-left、item-thumbnail-right列表图片项：item-image内嵌列表：list-inset卡片：card、item、item-text-wrap，项多时建议用内嵌列表，卡片有阴影卡片页眉页脚项：item-divider卡片列表：同时用listcard大内容项：item-body、内容链接（subdued）

样式库列表中表单：用label标签创建项item-input，表单域的placeholder属性提供label标签文本，用input-label类提供内嵌标签，列表项添加item-stacked-label类定义叠加内嵌标签和placeholder属性，使用item-floating-label类定义浮动标签内嵌表单：list和list-inset同用内嵌项：item-input-inset，标签上用item-input-wrapper

样式库表单域添加图标简单把图标标签放在input标签的前面即可，默认图标与标签同颜色，可使用placeholder-icon类让图标与placeholder同颜色页眉添加类item-input-inset，内部标签用item-input-wrapper类即可放表单域在页眉Toggle控件：label用toggle类、toggle-*labelclass=toggleinputtype=checkboxdivclass=trackdivclass=handle/div/div/label列表项包含Toggle：item-toggle列表项包含范围Range：列表项加range类

样式库列