[WebApp] Ionic으로 웹앱 개발하기 - Button

오늘은 Ionic Button에 대해 알아보겠습니다.

먼저 저는 Button이라는 제목의 새로운 프로젝트를 하나 만들었습니다.

ionic serve를 입력해서 실행해봅시다.

이제 버튼을 여러개 만들어보도록 하겠습니다.

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

그럼 다시 home.html로 돌아가서 버튼에 이벤트를 발생시키겠습니다.

 

<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이벤트를 통해 화면전환뿐만 아니라 여러 메소드 실행도 모두 가능합니다.