Ionic组件之弹窗实例
Ionic组件之弹窗实例:
效果图:
直接上代码:
1.组件action-sheets.ts代码:
import {Component} from '@angular/core';
import { ActionSheetController,Platform,AlertController } from 'ionic-angular';
@Component({
templateUrl:'action-sheets.html'
})
export class ActionSheets{
constructor(
public actionSheetCtrl:ActionSheetController,
public platform:Platform,
public alertCtrl:AlertController
){}
//action sheets
presentActionSheet(){
let actionSheet=this.actionSheetCtrl.create({
title:'Modify your album',
cssClass: 'action-sheets-basic-page',
buttons: [
{
text: 'Destructive',
role: 'destructive',
icon: !this.platform.is('ios') ? 'trash' : null,
handler: () => {
console.log('Destructive clicked');
}
},
{
text: 'Archive',
handler: () => {
console.log('Archive clicked');
}
},
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}
//弹窗
showAlert(){
let alert=this.alertCtrl.create({
title:"New Friend!",
subTitle:"Your friend,Obi wan Kenobi,just accepted your friend request!",
buttons:['OK']
});
alert.present();
}
showPrompt(){
let prompt=this.alertCtrl.create({
title:'login',
message:"enter a name for this new album you are so keen on adding",
inputs:[
{
name:'titled',
placeholder:'Titlek'
},
],
buttons:[
{
text:'Cancel',
handler:data=>{
console.log('Cancel clicked');
}
},
{
text:'Save',
handler:data=>{
for(var x in data){
console.log(x);
}
console.log(data+'Saved clicked');
}
}
]
})
prompt.present();
}
showConfirm() {
let confirm = this.alertCtrl.create({
title: 'Use this lightsaber.',
message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
buttons: [
{
text: 'Disagree',
handler: () => {
console.log('Disagree clicked');
}
},
{
text: 'Agree',
handler: () => {
console.log('Agree clicked');
}
}
]
});
confirm.present();
}
testRadioOpen: boolean;
testRadioResult;
showRadio(){
let alert=this.alertCtrl.create();
alert.setTitle('Lightsaber color');
alert.addInput({
type:'radio',
label:'blue',
value:'blue',
checked:true
});
alert.addButton('Cancel');
alert.addButton({
text:'OK',
handler:data=>{
this.testRadioOpen=false;
this.testRadioResult=data;
console.log(this.testRadioResult);
}
});
alert.present().then(()=>{
this.testRadioOpen=true;
});
}
testCheckboxOpen: boolean;
testCheckboxResult;
showCheckbox(){
let alert=this.alertCtrl.create();
alert.setTitle('Which planets have you visited?');
alert.addInput({
type:'checkbox',
label:'Alderaan',
value:'value',
checked:true
})
alert.addButton('Cancel');
alert.addButton({
text:'Okay',
handler:data=>{
console.log('Checkbox data:',data);
this.testCheckboxOpen=false;
this.testCheckboxResult=data;
}
})
alert.present();
}
}
2.action-sheets.html代码
<ion-header>
<ion-navbar>
<ion-title>Action Sheets</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="action-sheets-basic-page">
<button ion-button block (click)="presentActionSheet()">Show Action Sheet</button>
<button ion-button block (click)="showAlert()">Show Alert</button>
<button ion-button block (click)="showPrompt()">Show Prompt</button>
<button ion-button block (click)="showConfirm()">Show Confirm</button>
<button ion-button block (click)="showRadio()">Show Radio</button>
<button ion-button block (click)="showCheckbox()">Show Checkbox</button>
</ion-content>
<!--<ion-content padding>-->
<!--<button ion-button block color="dark" (click)="showAlert()">Show Basic Alert</button>-->
<!--</ion-content>-->
下一篇:Ionic组件之Badges
文章
总共 0 条评论