Angular第三方UI组件库(github搜“awesome angular ")-----lonic
概述：是一个第三方的适用于移动端App的UI组件库，可以与Angular/React/Vue.js组合，也可以独立使用。
九种主题色：primary、secondary、tertiary、danger、warning、success、dark、medium、light
1、页面结构：<ion-app>
<ion-header>
<ion-toolbar>
<ion-title></ion-title>
</ion-toolbar>
</ion-header>
<ion-content></ion-content>
<ion-footer></ion-footer>
<ion-app>
2、布局系统：
<ion-grid>
<ion-row>
<ion-col size="6" offse="" push="" pull=""></ion-col>
</ion-row>
</ion-grid>
3、徽章：
<ion-badge color=""></ion-badge>
4、图标：<ion-icon name="home"></ion-icon>
5、输入框：
<ion-item>
<ion-label position="fixed/stacked/floating">提示文字</ion-label>
<ion-input></ion-input>
</ion-item>
6.搜索框：<ion-searchbar></ion-searchbar>
7.按钮:
<ion-button color="" size="small/large"
expand="block/full" shape="round" fill="solid(实心)/outline(空心)/clear(没有背景色和边框)">文字+图标</ion-button>
8.卡片：
<ion-card>
<img>
<ion-card-header>ion-card-title/subtitle</ion-card-header>
<ion-card-content></ion-card-content>
</ion-card>
<ion-card>
<ion-item></ion-item>
...
</ion-card>
9.轮播广告
<ion-slides pager="true" #mySlides>
<ion-slide>文字/图片</ion-slide>
....
</ion-slides>
@ViewChild('mySlides',{static:true})
private mySlides
ngOninit(){
this.mySlides.startAutoplay()
}
10.列表项
<ion-item detail="true" href="#" (click)="">
<ion-avatar/thumbnail slot="start"></ion-avatar/thumbnail>
<ion-label></ion-label>
<ion-button slot="end">
<ion-icon slot="start"></ion-icon>
</ion-button>
</ion-item>
11.列表
<ion-list>
<ion-list-header></ion-list-header>
<ion-item></ion-item>
</ion-list>
12.无限滚动
<ion-infinite-scroll threshold="50px" (ionfinite)="loadMore($event)">
<ion-infinite-scroll-content loadingText="加载中...." loadingSpinner="bubblue">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
loadMore(ev){
//加载数据....
ev.target.complete()
}
13.弹出框(ActionSheet/Alert/Modal)
constructor(private alertController:AlertController){ }
this.alertController.create({
header:' ',
message:' ',
buttons:[' ',' ']
}).then( ( dialog) =>{
dialog.present()
})
14.标签页和导航系统
1.创建路由词典
const routes =[
{path:'index',component:IndexComponent}
]
2.注册路由词典
imports:[ RouterModule.forRoot(routes) ]
3.声明路由出口
<ion-router-outlet></ion-router-outlet>
4.使用标签页组件，关联路由地址
<ion-tabs>
<ion-tab-bar slot="bottom/top">
<ion-tab-button tab="index">
ion-icon +文字
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
5.访问测试