ionic3: Slides | Phaisarn Sutheebanjard

หน้า Slide มีทั้งหมด 4 หน้า โดย 3 หน้าแรก มีปุ่ม SKIP แต่หน้าที่ 4 ไม่มีปุ่ม SKIP

เพิ่มหน้า Tutorial ไว้แสดงแบบ Slide ตอนเปิดแอพ

[code]
ionic g page tutorial
[/code]

อ้างอิงหน้า Tutorial
src/app/app.module.ts

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

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

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();
    });
  }
}

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

page-tutorial {
    .slide-title {
        margin-top: 2.8rem;
    }
    
    .slide-image {
        max-height: 40%;
        max-width: 60%;
        margin: 36px 0;
    }
}

page-tutorial {

.slide-title {

margin-top: 2.8rem;

}

.slide-image {

max-height: 40%;

max-width: 60%;

margin: 36px 0;

}

src/pages/tutorial.html

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

<ion-header no-shadow>

<ion-navbar>

<ion-buttons end *ngIf="showSkip">

</ion-buttons>

</ion-navbar>

</ion-header>

<ion-content no-bounce>

<ion-slides pager="true" (ionSlideWillChange)="onSlideChangeStart($event)">

<ion-slide *ngFor="let slide of slides">

</ion-slide>

<ion-slide>

CONTINUE

<ion-icon name="arrow-forward"></ion-icon>

</button>

</ion-slide>

</ion-slides>

</ion-content>

src/pages/tutorial.ts

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');
  }
}

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

Slides