Angular第三方UI组件库------ionic
一、Angular UI组件库 ------------ionic
1、 官网：https://ionicframework.com
文档：https://ionicframework.com/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.com/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.com/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.com
文档：https://ionicframework.com/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.com/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.com/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阶段项目”首页组件中的内容。
