Ionic组件之弹窗实例:

 效果图:

alert.png

 直接上代码:

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>-->

上一篇:安装 node-sass 的正确方法(转载)

下一篇:Ionic组件之Badges