반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- vsCode
- picker
- jest
- react
- TensorFlow
- centos
- 개발
- IOS
- PYTHON
- localserver
- linux
- 네트워크
- xcode
- node
- Android
- avds
- unittest
- build
- androidstudio
- 맥
- VirtualBox
- Chrome
- 센토스
- MachineLearning
- 리눅스
- ReactNative
- qunit
- webpack
- MAC
Archives
- Today
- Total
로메오의 블로그
[Ionic] alert, toast, confirm 사용 본문
반응형
alert
src/app/account/my-account.page.ts
import { Component, OnInit } from '@angular/core';
import { AlertController } from '@ionic/angular';
import { ToastController } from '@ionic/angular';
import { PopoverController } from '@ionic/angular';
import { PopoveroneComponent } from '../../popoverone/popoverone.component';
@Component({
selector: 'app-my-account',
templateUrl: './my-account.page.html',
styleUrls: ['./my-account.page.scss'],
})
export class MyAccountPage implements OnInit {
constructor(
private alertController: AlertController,
public toastController: ToastController,
public popoverController: PopoverController
) { }
ngOnInit() {
}
async presentAlert() {
const alert = await this.alertController.create({
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['OK']
});
await alert.present();
}
async presentAlertMultipleButtons() {
const alert = await this.alertController.create({
header: 'Alert',
subHeader: 'Subtitle',
message: 'This is an alert message.',
buttons: ['Cancel', 'Open Modal', 'Delete']
});
await alert.present();
}
async presentAlertConfirm() {
const alert = await this.alertController.create({
header: 'Confirm!',
message: 'Message <strong>text</strong>!!!',
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: (blah) => {
console.log('Confirm Cancel: blah');
}
}, {
text: 'Okay',
handler: () => {
console.log('Confirm Okay');
}
}
]
});
await alert.present();
}
async presentAlertPrompt() {
const alert = await this.alertController.create({
header: 'Prompt!',
inputs: [
{
name: 'name1',
type: 'text',
placeholder: 'Placeholder 1'
},
{
name: 'name2',
type: 'text',
id: 'name2-id',
value: 'hello',
placeholder: 'Placeholder 2'
},
{
name: 'name3',
value: 'http://ionicframework.com',
type: 'url',
placeholder: 'Favorite site ever'
},
// input date with min & max
{
name: 'name4',
type: 'date',
min: '2017-03-01',
max: '2018-01-12'
},
// input date without min nor max
{
name: 'name5',
type: 'date'
},
{
name: 'name6',
type: 'number',
min: -5,
max: 10
},
{
name: 'name7',
type: 'number'
}
],
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: () => {
console.log('Confirm Cancel');
}
}, {
text: 'Ok',
handler: () => {
console.log('Confirm Ok');
}
}
]
});
await alert.present();
}
async presentAlertRadio() {
const alert = await this.alertController.create({
header: 'Radio',
inputs: [
{
name: 'radio1',
type: 'radio',
label: 'Radio 1',
value: 'value1',
checked: true
},
{
name: 'radio2',
type: 'radio',
label: 'Radio 2',
value: 'value2'
},
{
name: 'radio3',
type: 'radio',
label: 'Radio 3',
value: 'value3'
},
{
name: 'radio4',
type: 'radio',
label: 'Radio 4',
value: 'value4'
},
{
name: 'radio5',
type: 'radio',
label: 'Radio 5',
value: 'value5'
},
{
name: 'radio6',
type: 'radio',
label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ',
value: 'value6'
}
],
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: () => {
console.log('Confirm Cancel');
}
}, {
text: 'Ok',
handler: () => {
console.log('Confirm Ok');
}
}
]
});
await alert.present();
}
async presentAlertCheckbox() {
const alert = await this.alertController.create({
header: 'Checkbox',
inputs: [
{
name: 'checkbox1',
type: 'checkbox',
label: 'Checkbox 1',
value: 'value1',
checked: true
},
{
name: 'checkbox2',
type: 'checkbox',
label: 'Checkbox 2',
value: 'value2'
},
{
name: 'checkbox3',
type: 'checkbox',
label: 'Checkbox 3',
value: 'value3'
},
{
name: 'checkbox4',
type: 'checkbox',
label: 'Checkbox 4',
value: 'value4'
},
{
name: 'checkbox5',
type: 'checkbox',
label: 'Checkbox 5',
value: 'value5'
},
{
name: 'checkbox6',
type: 'checkbox',
label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6',
value: 'value6'
}
],
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: () => {
console.log('Confirm Cancel');
}
}, {
text: 'Ok',
handler: () => {
console.log('Confirm Ok');
}
}
]
});
await alert.present();
}
// toast
async presentToast() {
const toast = await this.toastController.create({
message: 'Your settings have been saved.',
duration: 2000
});
toast.present();
}
// toast
async presentToastWithOptions() {
const toast = await this.toastController.create({
header: 'Toast header',
message: 'Click to Close',
position: 'top',
buttons: [
{
side: 'start',
icon: 'star',
text: 'Favorite',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Done',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}
]
});
toast.present();
}
// popover
async presentPopover(ev: any) {
const popover = await this.popoverController.create({
component: PopoveroneComponent,
event: ev,
translucent: true
});
return await popover.present();
}
}
src/app/account/my-account.page.html
<app-header></app-header>
<ion-content>
<ion-button (click)="presentAlert()">presentAlert</ion-button>
<ion-button (click)="presentAlertMultipleButtons()">presentAlertMultipleButtons</ion-button>
<ion-button (click)="presentAlertConfirm()">presentAlertConfirm</ion-button>
<ion-button (click)="presentAlertPrompt()">presentAlertPrompt</ion-button>
<ion-button (click)="presentAlertRadio()">presentAlertRadio</ion-button>
<ion-button (click)="presentAlertCheckbox()">presentAlertCheckbox</ion-button>
<ion-button (click)="presentAlertCheckbox()">presentAlertCheckbox</ion-button>
<ion-button (click)="presentToast()">presentToast</ion-button>
<ion-button (click)="presentToastWithOptions()">presentToastWithOptions</ion-button>
<ion-button (click)="presentPopover()">presentPopover</ion-button>
</ion-content>
src/app/popoverone/popoverone.component.ts
import { Component, OnInit } from '@angular/core';
import { PopoverController } from '@ionic/angular'
@Component({
selector: 'app-popoverone',
templateUrl: './popoverone.component.html',
styleUrls: ['./popoverone.component.scss'],
})
export class PopoveroneComponent implements OnInit {
constructor(
public popoverController: PopoverController
) { }
ngOnInit() {}
close() {
this.popoverController.dismiss()
}
}
src/app/popoverone/popoverone.component.html
<ion-list>
<ion-item>
Note One
</ion-item>
<ion-item>
Note Two
</ion-item>
<ion-item (click)="close()">
<ion-label>Close</ion-label>
</ion-item>
</ion-list>
반응형
'Frontend > angular' 카테고리의 다른 글
[IONIC] IONIC Cordova에서 codepush 설치 - appcenter (0) | 2020.02.03 |
---|---|
[Ionic] Ionic 주요 명령어 정리 (0) | 2020.01.28 |
[Ionic] net::ERR_CLEARTEXT_NOT_PERMITTED 오류 해결 - Android (0) | 2020.01.16 |
[IONIC] iOS Status Bar font 색상 변경하기 (0) | 2020.01.16 |
[Ionic] QR Code 생성하기 / QR Code Scan (1) | 2020.01.16 |
Comments