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
I came just through youtube , this is an awesome design