本文整理了使用ionic3开发时会用到的一些最基本组件及用法
1、ion-tabs
最常见的通过标签切换页面：
tabs.html
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="消息" tabIcon="text"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="查询" tabIcon="search"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="我的" tabIcon="contact"></ion-tab>
</ion-tabs>
tabs.ts
import { Component } from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import { MessagePage } from '../message/message';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = HomePage;
tab2Root = MessagePage;
tab3Root = AboutPage;
tab4Root = ContactPage;
constructor() {
}
}- ion-tabs位于顶部：
<ion-content padding>
<ion-tabs tabsPlacement="top">
<ion-tab [root]="tab1" tabTitle="待办事项"></ion-tab>
<ion-tab [root]="tab2" tabTitle="全部列表"></ion-tab>
</ion-tabs>
</ion-content>
- 页面跳转时，定位到ion-tabs某个页签
<ion-tabs tabsPlacement="top" #myTabs>
<ion-tab [root]="tab1" tabTitle="页签一"></ion-tab>
<ion-tab [root]="tab2" tabTitle="页签二"></ion-tab>
<ion-tab [root]="tab3" tabTitle="页签三"></ion-tab>
<ion-tab [root]="tab4" tabTitle="页签四"></ion-tab>
</ion-tabs>
import { Component,ViewChild } from '@angular/core';
import { NavController,NavParams,Tabs } from 'ionic-angular';
import { SurveyPage } from '../survey/survey';
import { DesignPage } from '../design/design';
import { ReportPage } from '../report/report';
import { FeedbackPage } from '../feedback/feedback';
@Component({
selector: 'page-projectDetail',
templateUrl: 'projectDetail.html'
})
export class ProjectDetailPage {
tab1 = SurveyPage;
tab2 = DesignPage;
tab3 = ReportPage;
tab4 = FeedbackPage;
@ViewChild('myTabs') tabRef: Tabs;
pageIndex;
constructor(public navCtrl: NavController,public params:NavParams) {
//获取传递过来的参数
this.pageIndex=this.params.get('page');
}
ionViewDidEnter(){
if (this.pageIndex && this.pageIndex != '') {
this.tabRef.select(this.pageIndex);
}
}
}2、ion-list
<ion-list>
<button ion-item text-wrap (click)="goProjectDetail()">
<h2 style="padding-top: 10px;">幸福家园小区</h2>
<p style="margin: 10px 0;">请确认。</p>
<ion-icon name="ios-checkmark-circle-outline" item-end></ion-icon>
<p><ion-icon name="time"></ion-icon>2018.08.12 12:05:24</p>
</button>
<button ion-item text-wrap (click)="goProjectDetail()">
<h2 style="padding-top: 10px;">幸福家园小区</h2>
<p style="margin: 10px 0;">请确认。</p>
<ion-icon name="ios-checkmark-circle-outline" item-end></ion-icon>
<p><ion-icon name="time"></ion-icon>2018.08.12 12:05:24</p>
</button>
<button ion-item text-wrap (click)="goProjectDetail()">
<h2 style="padding-top: 10px;">幸福家园小区</h2>
<p style="margin: 10px 0;">请确认。</p>
<ion-icon name="ios-checkmark-circle-outline" item-end></ion-icon>
<p><ion-icon name="time"></ion-icon>2018.08.12 12:05:24</p>
</button>
</ion-list>
- ion-list下拉展开折叠子列表，默认展开第一个子列表
<ion-list>
<ion-item (click)="isShow=!isShow">list1
<ion-icon name="arrow-dropup" *ngIf="!isShow"></ion-icon>
<ion-icon name="arrow-dropdown" *ngIf="isShow"></ion-icon>
</ion-item>
<ion-list *ngIf="!isShow">
<ion-item (click)="showpdf()"><p>list1-1</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item>
</ion-list>
<ion-list *ngIf="!isShow">
<ion-item (click)="showpdf()"><p>list1-2</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item>
</ion-list>
<ion-list *ngIf="!isShow">
<ion-item (click)="showpdf()"><p>list1-3</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item>
</ion-list>
<ion-item (click)="isShowjg=!isShowjg">list2
<ion-icon name="arrow-dropup" *ngIf="isShowjg"></ion-icon>
<ion-icon name="arrow-dropdown" *ngIf="!isShowjg"></ion-icon>
</ion-item>
<ion-list *ngIf="isShowjg">
<ion-item (click)="showpdf()"><p>list2-1</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item>
</ion-list>
<ion-list *ngIf="isShowjg">
<ion-item (click)="showpdf()"><p>list2-2</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item>
</ion-list>
<ion-item (click)="isShowjps=!isShowjps">list3
<ion-icon name="arrow-dropup" *ngIf="isShowjps"></ion-icon>
<ion-icon name="arrow-dropdown" *ngIf="!isShowjps"></ion-icon>
</ion-item>
<ion-list *ngIf="isShowjps">
<ion-item (click)="showpdf()"><p>list3-1</p><ion-icon name="ios-arrow-forward"item-right></ion-icon></ion-item>
</ion-list>
</ion-list>
官方提供了按钮的多种样式
<button ion-button round outline style="float: right" (click)="goPage()">查看状态</button>
点击选择组件时，会弹出一个选择列表。
<ion-select style="max-width: 100%; margin: 0 auto;" [(ngModel)]="singles" multiple="false" cancelText="取消" okText="确定">
<ion-option selected="true">option1</ion-option>
<ion-option>option2</ion-option>
<ion-option>option3</ion-option>
</ion-select>
- multiple属性可以控制是否多选，cancelText 和 okText可以指定ion-select按钮的文本；ion-option的selected属性可以设置默认选项。
<button ion-item text-wrap (click)="gotoPage2()">
<ion-label><h2>手势解锁</h2></ion-label>
<ion-toggle outline item-end icon-left checked="{{ flag }}" (ionChange)="gotoPage2()"></ion-toggle>
</button>
6、Alerts
import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
@Component({
selector: 'page-design',
templateUrl: 'design.html'
})
export class DesignPage {
constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
}
showAlert() {
let alert = this.alertCtrl.create({
title: '提示',
message: '注册成功!',
buttons: ['OK']
});
alert.present();
}
} import { Component } from '@angular/core';
import { NavController, AlertController} from 'ionic-angular';
@Component({
selector: 'page-design',
templateUrl: 'design.html'
})
export class DesignPage {
constructor(public navCtrl: NavController, public alertCtrl: AlertController) {
}
showPrompt() {
let prompt = this.alertCtrl.create({
title: 'alert-prompt',
inputs: [
{
name: 'title',
placeholder: 'Title'
},{
name: 'title',
placeholder: 'Title'
},
],
buttons: [
{
text: '取消',
handler: data => {
// console.log('Cancel clicked');
}
},
{
text: '确认',
handler: data => {
// console.log('Saved clicked');
}
}
]
});
prompt.present();
}
}8、Modals
import { Component } from '@angular/core';
import { NavController, ModalController } from 'ionic-angular';
import { AdmissPage } from '../admiss/admiss';
@Component({
selector: 'page-design',
templateUrl: 'design.html'
})
export class DesignPage {
constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
}
goAdmiss() {
let modal = this.modalCtrl.create(AdmissPage, {
cssClass: 'custom-modal'
});
modal.present();
}
}- 上面代码中设置的参数cssClass: 'custom-modal' 是为了实现给模态窗口加背景浮层，需要同时设置弹出页面的样式
.custom-modal {
background-color: rgba(0, 0, 0, .5) !important;
}9、点击按钮页面跳转
<button ion-button round outline style="float: right" (click)="goPage()">查看状态</button>
import { Component } from '@angular/core';
import { NavController, ModalController } from 'ionic-angular';
import { ProjectDetailPage } from '../projectDetail/projectDetail';
import { App } from 'ionic-angular';
@Component({
selector: 'page-lists',
templateUrl: 'lists.html'
})
export class ListsPage {
constructor(public navCtrl: NavController, public app: App) {
}
goPage() {
// this.navCtrl.push(ProjectDetailPage);
this.app.getRootNavs()[0].push(ProjectDetailPage);
}
}10、返回
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-process',
templateUrl: 'process.html'
})
export class ProcessPage {
constructor(public navCtrl: NavController) {
}
goBack() {
this.navCtrl.pop();
}
}11、ion-icon
官方提供了丰富的图标库ionicons
<ion-icon name="ios-arrow-forward" style="font-size: 24px;" item-right></ion-icon>