lonic常用组件之五------按钮

一、Ionic常用组件之五------按钮

  <ion-button  color="主题色"   size="small/large"  expand="block/full" shape="round">

        文字

       <ion-icon  name=""  slot="start/end/icon-only"></ion-icon>

  </ion-button>

2.Ionic常用组件之六-----输入框

最简单的没有边框的输入框

  <ion-input    type=""  placeholder=""  maxlength="" ></ion-input>

带下边框和标签文字的输入框:

  <ion-item>

      <ion-label   position="fixed/stacked/floating">标签文字</ion-label>

      <ion-input   [(ngModel)] ="userInput"></ion-input>

  </ion-item>

 

3.Ionic常用组件之七-----搜索框

   <ion-searchbar  placeholder=""  (ngModelChange)="doChange()"></ion-searchbar>

 4.Ionic常用组件之八------卡片(ion-card)

  <ion-card>

        <img>

        <ion-card-header>

              ion-card-title  + ion-card-subtitle

        </ion-card-header>

        <ion-card-content></ion-card-content>

  </ion-card>

   <ion-card>

        <ion-item></ion-item>

         ......

        <ion-item></ion-item>

   </ion-card>

5.Ionic常用组件之九-----轮播广告(ion-slides) 

  <ion-slides  #myAd3>

        <ion-slide>文字或图片</ion-slide>

        ........

        <ion-slide>文字或图片</ion-slide>

  <ion-slides>

------------------------------------------------

@viewChild('myAd3',{static:false})

private  myAd3

ngOnInit(){

    this.myAad3.startAutoplay()   //开始自动播放

}

6.Ionic常用组件之九------列表项(ion-item)

 提示：只要见到了“有下划线的组件”，就想到列表项

  <ion-item  detail="true' href="#" color="">

       <ion-avatar/thumbnail   slot="start" >img</ion-avatar/thumbnail>

       <ion-label>文本/h2/h3/p</ion-label>

       <ion-button slot="end">文字/图标</ion-button>

  </ion-item>

 

7.Ionic常用组件之十--------列表

  <ion-list>

           <ion-item></ion-item>

           .......

           <ion-item></ion-item>

   </ion-list>

8.Ionic常用组件之十一-------无限滚动(ion-infinite-scroll)-----有一点点难度

      原理：在滚动条滚动到距离底部指定的“临界值(threshold)”时，立即触发特定的事件(ionlnfinite:"用户马上

就要看到底部了，请加载更多数据")，并显示出底部的“加载中”提示符号和文字。等到新的数据

加载完成(complete)了，再次隐藏"加载中"提示信息，等待用户继续滚动.....

   <ion-infinite-scroll   threshold="50px"  (ionInfinite)="loadMore()" >

           <ion-infinite-scroll-content  loadingText="加载中..."

          loadingSpinner="bubbles">

          </ion-infinite-scroll-content>

   </ion-infinite-scroll>

----------------------------------------------------------------------------------------

  loadMore(e){

    ...异步加载更多数据

      e.target.complete()

   }

9.Ionic常用组件之十二 -------弹出式窗口：ActionSheet/Alert/Modal

提示：这三个组件都没有对应的元素，都是通过XxxController动态创建出来的

      constructor(private  controller:AlertController){ }

      doXxx(){

            this.controller.create({

                    header:"标题字",

                    message:"提示信息",

                    buttons:["按钮1","按钮2"]

                }).then((dialog)=>{

                    dialog.present()    //呈现异步创建出来的对话框

             })

       }

	Angular路由系统	Ionic
创建路由词典	//app.module.ts const  routes = [      {path:'',component:...} ]	一样的
注册路由词典	//app.module.ts imports:       [BrowserModule, RouterModule.forRoot(routes)]	一样的
路由出口	<router-outlet></router-outlet>	<ion-router-outlet></ion-router-outlet>

 

10.Ionic常用组件之十三------------标签式导航(ion-tabs)