Slides List Side menu

Slides List Side menu

In this lesson discuss about combination of Slides, Lists, and side menu. so get a blank template and add platform then run. Simply run below command in terminal. First get a blank template and add platform then run.  Simply run below command in terminal.

  • $ ionic start tutorial sidemenu --type=ionic-angular
  • $ cd tutorial/
  • $ ionic cordova platform add ios
  • $ ionic generate page users --no-module
  • $ ionic generate page mypost --no-module
  • $ ionic cordova run ios

Finally edit files in order to get awesome design.

To get homepage view edit src/pages/home/home.html file

<ion-header>
  <ion-navbar color=“purple”>
    <button ion-button menuToggle>
      <ion-icon name=“menu”></ion-icon>
    </button>
    <ion-title>Beache</ion-title>
  </ion-navbar>

  <ion-slides slidesPerView=“4.5”>
    <ion-slide>
      <p> Menu1</p>
    </ion-slide>
    <ion-slide>
      <p> Menu2</p>
    </ion-slide>
    <ion-slide>
      <p> Menu3</p>
    </ion-slide>
    <ion-slide>
      <p> Menu4</p>
    </ion-slide>
    <ion-slide>
      <p> Menu5</p>
    </ion-slide>
    <ion-slide>
      <p> Menu6</p>
    </ion-slide>
  </ion-slides>
</ion-header>

<ion-content fulltext>
  <ion-card>
    <ion-slides pager=“true” autoplay=“2000” loop=“true”>
      <ion-slide>
        <img src=“assets/imgs/image1.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image2.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image3.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image4.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image5.jpg” />
      </ion-slide>
    </ion-slides>
  </ion-card>

  <ion-card>
    <ion-card-header>
      Header1
    </ion-card-header>
    <ion-slides slidesPerView=“3” spaceBetween=“5”>
      <ion-slide>
        <img src=“assets/imgs/image6.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image7.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image8.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image9.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image10.jpg” />
      </ion-slide>
    </ion-slides>
  </ion-card>

  <ion-card>
    <ion-card-header>
      Header2
    </ion-card-header>
    <ion-slides slidesPerView=“2” spaceBetween=“5”>
      <ion-slide>
        <img src=“assets/imgs/image6.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image7.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image8.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image9.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image10.jpg” />
      </ion-slide>
    </ion-slides>
  </ion-card>

  <ion-card>
    <ion-card-header>
      Header3
    </ion-card-header>
    <ion-slides slidesPerView=“4” spaceBetween=“5”>
      <ion-slide>
        <img src=“assets/imgs/image1.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image2.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image3.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image4.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image5.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image6.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image7.jpg” />
      </ion-slide>
    </ion-slides>
  </ion-card>

  <ion-card>
    <ion-card-header>
      Header4
    </ion-card-header>
    <ion-slides slidesPerView=“2” spaceBetween=“5”>
      <ion-slide>
        <img src=“assets/imgs/image10.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image9.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image8.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image7.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image6.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image5.jpg” />
      </ion-slide>
      <ion-slide>
        <img src=“assets/imgs/image4.jpg” />
      </ion-slide>
    </ion-slides>
  </ion-card>

</ion-content>

Edit src/app/pages/mypost/mypost.html file

<ion-header>
  <ion-navbar>
    <ion-title>Mypost</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card *ngFor=“let data of post;let $index = index”>
    <ion-card-header>
      {{data.name}}
    </ion-card-header>
    <ion-card-content>
      {{data.body}}
    </ion-card-content>
  </ion-card>
</ion-content>

Edit src/app/pages/mypost/mypost.ts file

import { Component } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;
import { HttpClient } from ‘@angular/common/http’;

@Component({
  selector: ‘page-mypost’,
  templateUrl: ‘mypost.html’,
})
export class MypostPage {
  post: any;
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public http: HttpClient
  ) {
  }

  ionViewDidLoad() {
    var url = ‘https://jsonplaceholder.typicode.com/comments’;
    this.http.get(url).subscribe(data => {
      this.post = data;
      console.log(data);
    });
  }
}

To function  edit src/app/app.components.ts  file

import { Component, ViewChild } from ‘@angular/core’;
import { Nav, 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 { UsersPage } from ‘../pages/users/users’;
import { MypostPage } from ‘../pages/mypost/mypost’;

 

@Component({
  templateUrl: ‘app.html’
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

 

  rootPage: any = HomePage;

 

  pages: Array<{ title: string, component: any }>;

 

  constructor(public platform: Platform, 
public statusBar: StatusBar, 
public splashScreen: SplashScreen) {
    this.initializeApp();

 

    // used for an example of ngFor and navigation
    this.pages = [
      { title: ‘Home’, component: HomePage },
      { title: ‘My Users’, component: UsersPage },
      { title: ‘My Post’, component: MypostPage }
    ];

 

  }

 

  initializeApp() {
    this.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.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

 

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn’t want the back button to show in this scenario
    if (page.title == ‘My Users’ || page.title == ‘My Post’) {
      this.nav.push(page.component);
    } else {
      this.nav.setRoot(page.component);
    }

 

  }
}

To design side menu edit src/app/app.html file

<ion-menu [content]=“content” type=“overlay”>
  <ion-header>

 

    <ion-toolbar class=“user-profile”>
      <ion-grid>
        <ion-row>
          <ion-col col-4>
            <div class=“user-avatar”>
              <img src=“assets/imgs/user.png” />
            </div>
          </ion-col>
          <ion-col col-8>
            <h4>
              User Name
            </h4>
            <p>
              Description
            </p>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-toolbar>
    <ion-list class=“user-list”>
    <button menuClose ion-item *ngFor=“let p of pages” (click)=“openPage(p)”>
        {{p.title}}
      </button>
    </ion-list>

 

  </ion-header>

 

  <ion-content></ion-content>

 

</ion-menu>

 

 
<ion-nav [root]=“rootPage” #content swipeBackEnabled=“false”></ion-nav>

To design side menu edit src/app/app.scss file

.user-profile {
    
      .toolbar-background{
        background-image: linear-gradient(to right#AA4AD8 , #4A69FF);
      }
        color#ffffff;
          }
  

To design userspage menu edit src/pages/users/users.html file

<ion-header>
  <ion-navbar color=“purple”>
    <ion-title>My Users</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName1</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName2</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName3</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName4</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName5</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName6</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName7</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName8</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName9</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName10</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName11</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName12</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName13</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName14</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

    <ion-item>
      <ion-thumbnail item-start>
        <img src=“assets/imgs/user.png”>
      </ion-thumbnail>
      <h2>UserName15</h2>
      <p>User Description</p>
      <button ion-button clear item-end>View</button>
    </ion-item>

  </ion-list>

</ion-content>

Follow up with high-quality video tutorial on YouTube

One thought on “Slides List Side menu

Leave a Reply

Your email address will not be published. Required fields are marked *