alerts.html
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Alerts</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button block (click)="showBasicAlert()">Show Basic Alert</button>
<button ion-button block (click)="showPromptAlert()">Show Prompt Alert</button>
<button ion-button block (click)="showRadioAlert()">Show Radio Alert</button>
</ion-content>
alerts.ts
import { Component } from '@angular/core';
import { AlertController } from 'ionic-angular';
@Component({
templateUrl: 'alerts.html'
})
export class AlertsPage {
constructor(public alertCtrl: AlertController) {
}
showBasicAlert() {
let alert = this.alertCtrl.create({
title: 'Basic Alert!',
subTitle: 'This is an ui component called a basic alert',
buttons: ['OK']
});
alert.present();
}
showPromptAlert() {
let prompt = this.alertCtrl.create({
title: 'Login',
message: 'Enter your password',
inputs: [
{
name: 'password',
placeholder: 'Input your password'
}
],
buttons: [
{
text: 'Cancel',
handler: data => {
}
},
{
text: 'Next',
handler: data => {
console.log(data['password']);
}
}
]
});
prompt.present();
}
showRadioAlert() {
let alert = this.alertCtrl.create();
alert.setTitle('Choose your location');
alert.addInput({
type: 'radio',
label: 'Seoul',
value: 'seoul',
checked: true
});
alert.addInput({
type: 'radio',
label: 'Daejeon',
value: 'daejeon'
});
alert.addInput({
type: 'radio',
label: 'Busan',
value: 'busan'
});
alert.addButton('Cancel');
alert.addButton({
text: 'OK',
handler: data => {
console.log(data);
}
});
alert.present();
}
}
'Web > Ionic' 카테고리의 다른 글
[Ionic] Components Cards (0) | 2017.03.28 |
---|---|
[Ionic] Components Buttons (0) | 2017.03.28 |
[Ionic] Components Action Sheets (0) | 2017.03.23 |
[Ionic] sidemenu 앱에서 페이지 추가하기 (0) | 2017.03.22 |
[Ionic] 프로젝트 만들기 (0) | 2017.03.22 |