หน้า Slide มีทั้งหมด 4 หน้า โดย 3 หน้าแรก มีปุ่ม SKIP แต่หน้าที่ 4 ไม่มีปุ่ม SKIP
เพิ่มหน้า Tutorial ไว้แสดงแบบ Slide ตอนเปิดแอพ
[code]
ionic g page tutorial
[/code]
อ้างอิงหน้า Tutorial
src/app/app.module.ts
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 31 32 33 |
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { TutorialPage } from '../pages/tutorial/tutorial'; @NgModule({ declarations: [ MyApp, HomePage, TutorialPage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage, TutorialPage ], providers: [ StatusBar, SplashScreen, { provide: ErrorHandler, useClass: IonicErrorHandler } ] }) export class AppModule { } |
แสดงหน้า Tutorial เป็นหน้าแรก
src/app/app.component.ts
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import { Component } from '@angular/core'; import { Platform } from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; //import { HomePage } from '../pages/home/home'; import { TutorialPage } from '../pages/tutorial/tutorial'; @Component({ templateUrl: 'app.html' }) export class MyApp { rootPage: any = TutorialPage; constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. statusBar.styleDefault(); splashScreen.hide(); }); } } |
src/pages/tutorial.scss
1 2 3 4 5 6 7 8 9 10 11 |
page-tutorial { .slide-title { margin-top: 2.8rem; } .slide-image { max-height: 40%; max-width: 60%; margin: 36px 0; } } |
src/pages/tutorial.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<ion-header no-shadow> <ion-navbar> <ion-buttons end *ngIf="showSkip"> <button ion-button (click)="startApp()" color="primary">SKIP</button> </ion-buttons> </ion-navbar> </ion-header> <ion-content no-bounce> <ion-slides pager="true" (ionSlideWillChange)="onSlideChangeStart($event)"> <ion-slide *ngFor="let slide of slides"> <img [src]="slide.image" class="slide-image" /> <h2 class="slide-title" [innerHTML]="slide.title"></h2> <p [innerHTML]="slide.description"></p> </ion-slide> <ion-slide> <button ion-button icon-end large clear (click)="startApp()"> CONTINUE <ion-icon name="arrow-forward"></ion-icon> </button> </ion-slide> </ion-slides> </ion-content> |
src/pages/tutorial.ts
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { HomePage } from '../home/home'; @IonicPage() @Component({ selector: 'page-tutorial', templateUrl: 'tutorial.html', }) export class TutorialPage { slides: any; showSkip = true; constructor(public navCtrl: NavController, public navParams: NavParams) { this.slides = [ { title: "Welcome to the Docs!", description: "Get ready for more Field Research tasks and exciting rewards in June! The Ionic Cloud is a cloud platform for managing and scaling Ionic apps with integrated services like push notifications, native builds, user auth, and live updating.", image: "assets/imgs/logo.png", }, { title: "What is Ionic?", description: "Ionic Framework is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.", image: "assets/imgs/logo.png", }, { title: "What is Ionic Cloud?", description: "The Ionic Cloud is a cloud platform for managing and scaling Ionic apps with integrated services like push notifications, native builds, user auth, and live updating.", image: "assets/imgs/logo.png", } ]; } startApp() { this.navCtrl.setRoot(HomePage, {}, { animate: true, direction: 'forward' }); } onSlideChangeStart(slider) { this.showSkip = !slider.isEnd(); } ionViewDidEnter() { // the root left menu should be disabled on the tutorial page //this.menu.enable(false); } ionViewWillLeave() { // enable the root left menu when leaving the tutorial page //this.menu.enable(true); } ionViewDidLoad() { console.log('ionViewDidLoad TutorialPage'); } } |
Link