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阶段项目”首页组件中的内容。