一、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階段項目”首頁組件中的內容。