一、Angular? UI组件库? ------------ionic
1、 官网： https://ionicframework测试数据
? ? ? 文档： https://ionicframework测试数据/docs
? ? ? 概述：是一个移动端UI组件库，可以与Angular/Vue/React组合应用，也可以单独使用(SCRIPT直接引入)
? ? ? 可以使用lonic的步骤：
? ? ? 1.下载并安装全局的脚手架工具
? ? ? ? ? ? npm? ? ?i? ? ?-g? ? ionic
? ? ? ? ? ?默认安装在c:/users/用户名/appdata/roaming/npm
? ? ? 2.运行脚手架工具，创建一个空白项目
? ? ? ? ? ionic? ? start? ?项目名
? ? ? ? ? ionic? ? start? ?项目名? ?blank/tabs/sidemenu
? ? ? 3.进入空白项目，启动开发服务器
? ? ? ? ? npm? ? start
? ? ? ?4.使用客户端访问测试
? ? ? ??
2、lonic的九种主题色：
? ? ?primary:? ? ? 蓝+白色
? ? ?secondary:? 青+白色
? ? ?tertiary:? ? ? ?紫+白色
? ? ?success:? ? ? 绿+白色
? ? ?warning:? ? ?黄+白色
? ? ?danger:? ? ? ?红+白色
? ? ?danrk:? ? ? ? ?黑+白色
? ? ? medium:? ? ? ?灰+白色
? ? ?light:? ? ? ? ? ? ?白 + 黑色
?
3、lonic组件在IOS和Android的效果不一样的：
? ? ? ?ios风格：
? ? ? ?md风格：Google提供的Meterial Design风格
二者标题栏不同、弹出框不同、按钮不同、图片显示效果不同.....
?
4、lonic移动App页面结构：
? ? ? <ion-app>? ? 保证始终铺满全屏的容器
? ? ? ? ? ? ?<ion-header>
? ? ? ? ? ? ? ? ? ? ?<ion-toolbar>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <ion-title>标题字</ion-title>
? ? ? ? ? ? ? ? ? ? ?</ion-toolbar>
? ? ? ? ? ? ?</ion-header>
?
? ? ? ? ? ? ?<ion-content padding>
? ? ? ? ? ? ?</ion-content>
?
? ? ? ? ? ? ?<ion-footer>
? ? ? ? ? ? ? ? ? ? ?<ion-toolbar>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <ion-title>标题字</ion-title>
? ? ? ? ? ? ? ? ? ? ?</ion-toolbar>
? ? ? ? ? ? ?</ion-footer>
? ? ? </ion-app>? ?
?
5、lonic中的响应式网格布局系统
手册地址： https://ionicframework测试数据/docs/layout/grid
lonic提供了一套类似于Bootstrap的响应式栅格布局系统
<ion-grid>
? ? ? ? <ion-row>
? ? ? ? ? ? ?<ion-col>内容</ion-col>
? ? ? ? <ion-row>
</ion-grid>
这套布局系统的特点：
1.列可以不指定宽度占比，在一行中的多个列的宽度会平均分配，一行中列的数量取决于屏幕的 宽度。
2.可以使用size属性指定一列的宽度占比-----总分为12；6就是6/12,4就是4/12。
3.可以使用 offset(偏移量) 属性指定一列向右偏移指定的宽度-----底层
是用margin-left实现的，故会影响当前列及后续的列。
4.可以使用 push(向右推) 和 pull(向左拉) 属性调整一列 的出现位置-----底层是用绝对定位
实现的，故不会影响同一行的其他列。
?
6.Ionic中常用的UI组件
? ?手册地址： https://ionicframework测试数据/docs/components
? ? 1.Badge：徽章
? ? ? ? ? <ion-badge? color="九种主题色之一">23</ion-badge>
? ? 2.Icon：图标
? ? ? ? ?<ion-icon name="图标名称" color="主题色"></ion-icon>
练习：查找下列图标对应的name属性：首页(home)、配置(settings)、
购物车(cart)、用户(person)、星星(star)、心形(heart)、定位(pin)、
邮件(mail)、拍照(camera)、扫码(qr-scanner)、指纹(finger-print)、
后退(arrow-back)、前进(arrow-forward)、刷新(refresh)
?
课后任务：
(1)继续自学lonic常用组件:Button、Input、SearchBar、Card、Toolbar、Slides
(2)使用上述组件完成“lonic阶段项目”首页组件中的内容。
?
Angular第三方UI组件库(github搜“awesome angular ")-----lonic
概述：是一个第三方的适用于移动端App的UI组件库，可以与Angular/React/Vue.js组合，也可以独立使用。
九种主题色：primary、secondary、tertiary、danger、warning、success、dark、medium、light
2、页面结构：<ion-app>
? ? ? ? ? ? ? ? ? ? ? ? <ion-header>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <ion-toolbar>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<ion-title></ion-title>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?</ion-toolbar>
? ? ? ? ? ? ? ? ? ? ? ? </ion-header>
? ? ? ? ? ? ? ? ? ? ? ? <ion-content></ion-content>
? ? ? ? ? ? ? ? ? ? ? ? <ion-footer></ion-footer>
? ? ? ? ? ? ? ? ? <ion-app>
3、布局系统：
? ? ? ? ? ?<ion-grid>
? ? ? ? ? ? ? ? ?<ion-row>
? ? ? ? ? ? ? ? ? ? ? ? <ion-col? size="6" offse="" push=""? ? pull=""></ion-col>
? ? ? ? ? ? ? ? ? </ion-row>
? ? ? ? ? ?</ion-grid>
4、徽章：
? ? ? ? ?<ion-badge color=""></ion-badge>
5、图标：<ion-icon name="home"></ion-icon>
?
一、Angular? UI组件库? ------------ionic
1、 官网： https://ionicframework测试数据
? ? ? 文档： https://ionicframework测试数据/docs
? ? ? 概述：是一个移动端UI组件库，可以与Angular/Vue/React组合应用，也可以单独使用(SCRIPT直接引入)
? ? ? 可以使用lonic的步骤：
? ? ? 1.下载并安装全局的脚手架工具
? ? ? ? ? ? npm? ? ?i? ? ?-g? ? ionic
? ? ? ? ? ?默认安装在c:/users/用户名/appdata/roaming/npm
? ? ? 2.运行脚手架工具，创建一个空白项目
? ? ? ? ? ?ionic? ? start? ?项目名
? ? ? ? ? ionic? ? start? ?项目名? ?blank/tabs/sidemenu
? ? ? 3.进入空白项目，启动开发服务器
? ? ? ? ? ?npm? ? start
? ? ? ?4.使用客户端访问测试
? ? ? ??
2、lonic的九种主题色：
? ? ?primary:? ? ? 蓝+白色
? ? ?secondary:? 青+白色
? ? ?tertiary:? ? ? ?紫+白色
? ? ?success:? ? ? 绿+白色
? ? ?warning:? ? ?黄+白色
? ? ?danger:? ? ? ?红+白色
? ? ?danrk:? ? ? ? ?黑+白色
? ? ? medium:? ? ? ?灰+白色
? ? ?light:? ? ? ? ? ? ?白 + 黑色
?
3、lonic组件在IOS和Android的效果不一样的：
? ? ? ?ios风格：
? ? ? ?md风格：Google提供的Meterial Design风格
二者标题栏不同、弹出框不同、按钮不同、图片显示效果不同.....
?
4、lonic移动App页面结构：
? ? ? <ion-app>? ? 保证始终铺满全屏的容器
? ? ? ? ? ? ?<ion-header>
? ? ? ? ? ? ? ? ? ? ?<ion-toolbar>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <ion-title>标题字</ion-title>
? ? ? ? ? ? ? ? ? ? ?</ion-toolbar>
? ? ? ? ? ? ?</ion-header>
?
? ? ? ? ? ? ?<ion-content padding>
? ? ? ? ? ? ?</ion-content>
?
? ? ? ? ? ? ?<ion-footer>
? ? ? ? ? ? ? ? ? ? ?<ion-toolbar>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <ion-title>标题字</ion-title>
? ? ? ? ? ? ? ? ? ? ?</ion-toolbar>
? ? ? ? ? ? ?</ion-footer>
? ? ? </ion-app>? ?
?
5、lonic中的响应式网格布局系统
手册地址： https://ionicframework测试数据/docs/layout/grid
lonic提供了一套类似于Bootstrap的响应式栅格布局系统
<ion-grid>
? ? ? ? <ion-row>
? ? ? ? ? ? ?<ion-col>内容</ion-col>
? ? ? ? <ion-row>
</ion-grid>
这套布局系统的特点：
1.列可以不指定宽度占比，在一行中的多个列的宽度会平均分配，一行中列的数量取决于屏幕的 宽度。
2.可以使用size属性指定一列的宽度占比-----总分为12；6就是6/12,4就是4/12。
3.可以使用 offset(偏移量) 属性指定一列向右偏移指定的宽度-----底层
是用margin-left实现的，故会影响当前列及后续的列。
4.可以使用 push(向右推) 和 pull(向左拉) 属性调整一列 的出现位置-----底层是用绝对定位
实现的，故不会影响同一行的其他列。
?
6.Ionic中常用的UI组件
? ?手册地址： https://ionicframework测试数据/docs/components
? ?? 1.Badge：徽章
? ? ? ? ? <ion-badge? color="九种主题色之一">23</ion-badge>
?? ? 2.Icon：图标
? ? ? ? ?<ion-icon name="图标名称" color="主题色"></ion-icon>
练习：查找下列图标对应的name属性：首页(home)、配置(settings)、
购物车(cart)、用户(person)、星星(star)、心形(heart)、定位(pin)、
邮件(mail)、拍照(camera)、扫码(qr-scanner)、指纹(finger-print)、
后退(arrow-back)、前进(arrow-forward)、刷新(refresh)
?
课后任务：
(1)继续自学lonic常用组件:Button、Input、SearchBar、Card、Toolbar、Slides
(2)使用上述组件完成“lonic阶段项目”首页组件中的内容。
?
查看更多关于Angular第三方UI组件库------ionic的详细内容...