Ionic组件之Slides

效果图

直接上代码

slides.ts

import { Component } from '@angular/core';

@Component({
    templateUrl: 'slides.html'
})
export class Slides {
    slides = [
        {
            title: "Welcome to the Docs!",
            description: "The <b>Ionic Component Documentation</b> showcases a number of useful components that are included out of the box with Ionic.",
            image: "assets/img/ica-slidebox-img-1.png",
        },
        {
            title: "What is Ionic?",
            description: "<b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.",
            image: "assets/img/ica-slidebox-img-1.png",
        },
        {
            title: "What is Ionic Cloud?",
            description: "The <b>Ionic Cloud</b> 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/img/ica-slidebox-img-1.png",
        }
    ];
}

slides.html

<ion-header>
    <ion-navbar>
        <ion-title>Slides</ion-title>
    </ion-navbar>
</ion-header>
<ion-content class="tutorial-page">
    <ion-slides pager>
        <ion-slide *ngFor="let slide of slides">
            <ion-toolbar>
                <ion-buttons end>
                    <button ion-button color="primary">Skip</button>
                </ion-buttons>
            </ion-toolbar>
            <img [src]="slide.image" class="slide-image"/>
            <h2 class="slide-title" [innerHTML]="slide.title"></h2>
            <p [innerHTML]="slide.description"></p>
        </ion-slide>
        <ion-slide>
            <ion-toolbar>
            </ion-toolbar>
            <img src="assets/img/ica-slidebox-img-4.png" class="slide-image"/>
            <h2 class="slide-title">Ready to Play?</h2>
            <button ion-button large clear icon-end color="primary">
                Continue
                <ion-icon name="arrow-forward"></ion-icon>
            </button>
        </ion-slide>
    </ion-slides>
</ion-content>

slides.scss

.tutorial-page {

  .toolbar-background {
    background: #fff;
    border-color: transparent;
  }

  .slide-zoom {
    height: 100%;
  }

  .slide-title {
    margin-top: 2.8rem;
  }

  .slide-image {
    max-height: 50%;
    max-width: 60%;
    margin: 18px 0;
  }

  b {
    font-weight: 500;
  }

  p {
    padding: 0 40px;
    font-size: 14px;
    line-height: 1.5;
    color: #60646B;

    b {
      color: #000000;
    }
  }

}