@챈챈/#WebApp
[WebApp] Ionic으로 웹앱 개발하기 - Button
자바장인
2020. 1. 14. 16:43
오늘은 Ionic Button에 대해 알아보겠습니다.
먼저 저는 Button이라는 제목의 새로운 프로젝트를 하나 만들었습니다.
ionic serve를 입력해서 실행해봅시다.
이제 버튼을 여러개 만들어보도록 하겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<ion-header>
<ion-navbar>
<ion-title>
Button
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p><button ion-button>Default</button></p>
<p><button ion-button color="light">Light</button></p>
<p><button ion-button color="secondary">Secondary</button></p>
<p><button ion-button color="danger">Danger</button></p>
<p><button ion-button color="dark">Dark</button></p>
</ion-content>
|
|
실행시킨 화면을 보면 이렇게 뜹니다. 버튼 색도 자유롭게 변경할 수 있고 css를 통해 버튼 모양도 바꿀 수 있습니다.
버튼을 클릭하면 화면 전환이 되도록 이벤트를 넣어보겠습니다.
새로운 화면을 하나 만들어줍니다.
1. ionic g page tabs(page name)
2. tabs.module.ts를 지우고, tabs.ts에서 @IonicPage() 라인 지우기.
3. app.module.ts에서 declarations와 entryComponents에서 새로운 페이지(TabsPage) 추가
그런 다음, 버튼이 있는 home.ts에 클릭 이벤트를 발생시킬 수 있는 함수를 만들어줍니다.
간단하게 이렇게 작성했습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TabsPage } from '../tabs/tabs';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}
inputclick(){
console.log("success");
window.alert("화면전환 성공!");
this.navCtrl.push(TabsPage)
}
}
|
|
그럼 다시 home.html로 돌아가서 버튼에 이벤트를 발생시키겠습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<ion-header>
<ion-navbar>
<ion-title>
Button
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<p><button ion-button (click)="inputclick()">Default</button></p>
<p><button ion-button (click)="inputclick()" color="light">Light</button></p>
<p><button ion-button (click)="inputclick()" color="secondary">Secondary</button></p>
<p><button ion-button (click)="inputclick()" color="danger">Danger</button></p>
<p><button ion-button (click)="inputclick()" color="dark">Dark</button></p>
</ion-content>
|
|
(click)="함수이름()"을 버튼에 추가합니다.
실행시키면 화면 전환이 이루어지는 것을 확인할 수 있습니다.
스크립트에 썼던 alert 발생
tabs.html의 내용으로 전환됨을 확인할 수 있습니다.
버튼의 click이벤트를 통해 화면전환뿐만 아니라 여러 메소드 실행도 모두 가능합니다.