Ionic 2.x/3.x - Ionic Material Sidemenu

Ionic 2.x/3.x - Ionic Material Sidemenu

Add a material design menu to your Ionic 2 application with only a few lines of code.

$10.00

(1)
Iclic Labs

Iclic Labs

Member since 2014

Details

Version:
1.1
Size:
1mb
Ionic:
2.x,3.x
Platforms:
iOS, Android, Windows Phone
View ID:
4d800893
Released:
4 years ago
Updated:
4 years ago
Category:
Plugins
Tags:
drawer, sidemenu, menu, material, design, iclic labs, iclic, ionic2, ionic3

Thanks to all of you who have downloaded this plugin! Please consider leaving a rating and review, it would be really helpful to get your feedbacks. Thanks.


Plugin by icliclabs.com

This plugin is compatible with Ionic v2.x and v3.x!

Description

Add a beautiful material design menu to your Ionic 2 application. This plugin works on iOS, Android and Windows Phone and respects the material design guidelines. You can easily customize the cover header, the profile picture and the entries with only a few lines of code.

Test Before You Buy

You can test the app using Ionic View and enter the app id 4d800893.

Features

  1. Works with iOS, Android and Windows Phone.
  2. Easy to include in your existing app.
  3. Follows the Material Design Guidelines.
  4. Easily custom the background color, the text color and the buttons.
  5. Comes with a full and detailed example.
  6. This component has well structured html, css and js files and is heavily commented, so that it is easy to edit, add your style, etc.

Installation

  1. Copy the app/components/ion-material-sidemenu.ts file into your app directory
  2. Import IonMaterialSidemenu component and add it to the declarations list in the app/app.module.ts file
  3. Copy the assets from the app/assets/ directory into your app/assets/ directory

That's all!

Usage

  1. in your app.html, add <ion-material-sidemenu [options]="menuOptions"></ion-material-sidemenu> in your ion-content, the parameter options is an IonMaterialSidemenuOptions where you set the username, the email, the background, the profile picture and the menu entries.

That's all. Here is an example of the app.html file, very simple. Just include the ion-material-sidemenu component:

<ion-menu [content]="content">
  <ion-content>
    <!-- simply use the the ion-material-sidemenu -->
    <ion-material-sidemenu [options]="menuOptions"></ion-material-sidemenu>
  </ion-content>
</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Here is a simple example:

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, MenuController, Events } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { Page1 } from '../pages/page1/page1';
import { IonMaterialSidemenuOptions } from '../components/ion-material-sidemenu';

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

  rootPage: any = Page1;

  menuOptions: IonMaterialSidemenuOptions;

  constructor(public platform: Platform, public menuCtrl: MenuController, public events: Events) {
    this.initializeApp();
    let _t = this; //keep a reference

    // initialize the menu
    this.menuOptions = {
      header: {
        background: '#ccc url(./assets/menu_bg1.jpg) no-repeat top left / cover',
        picture: 'https://avatars2.githubusercontent.com/u/1867703?v=3&s=460',
        username: 'Iclic Labs - Gmail',
        email: 'icl1clabs@gmail.com',
      },
      entries: [
        { title: 'Inbox', leftIcon: 'mail', onClick: () => { _t.nav.setRoot(Page1) } },
        { title: 'Labels', isDivider: true },
        { title: 'Sent mail', leftIcon: 'send', onClick: () => { _t.nav.setRoot(Page1) } }
      ]
    };
  }
};

Menu item with a right icon:

{ 
  title: 'Label', 
  leftIcon: 'square-outline', 
  rightIcon: 'ios-arrow-forward',
  onClick: () => { _t.nav.setRoot(Page1) } 
} 

Menu item with a badge:

{ 
  title: 'Label', 
  leftIcon: 'square-outline',
  badge: {
    text: '3',
    color: 'secondary'
  },
  onClick: () => { _t.nav.setRoot(Page1) }
}

Menu item with a custom CSS class:

{ 
  title: 'Label', 
  leftIcon: 'square-outline',
  classes: 'my-custom-css-class',
  onClick: () => { _t.nav.setRoot(Page1) }
}

Menu item selected:

{ 
  isSelected: true, 
  title: 'Label',
  leftIcon: 'bookmarks', 
  onClick: () => { _t.nav.setRoot(Page1) } 
}

Menu divider without text:

{ isDivider: true }

Menu divider with text:

{ 
  isDivider: true,
  title: 'Divider'
}

Click on cover header:

header: {
  background: '#ccc url(./assets/menu_bg2.jpg) no-repeat top left / cover',
  picture: 'https://avatars2.githubusercontent.com/u/1867703?v=3&s=460',
  username: 'Iclic Labs - Google Keep Menu',
  email: 'icl1clabs@gmail.com',
  onClick: () => { alert('menu header clicked'); }
}

Other Popular Plugins:

  1. Ionic Categories: Ionic v2.x/v3.x
  2. Ionic Passcode Square: Ionic v2.x/v3.x
  3. Ionic Passcode Flat: Ionic v2.x/v3.x
  4. Ionic Passcode Round: Ionic v2.x/v3.x
  5. Ionic Shrinking Header: Ionic v2.x/v3.x
  6. Ionic Material Sidemenu: Ionic v2.x/v3.x
  7. Ionic Walkthrough: Ionic v2.x/v3.x
  8. Ionic Contacts Inviter: Ionic v2.x/v3.x
  9. Ionic Cover Header: Ionic v1.x - Ionic v2.x/v3.x
  10. Ionic Profile Header: Ionic v2.x/v3.x
  11. Ionic Numeric Keyboard: Ionic v1.x - Ionic v2.x/v3.x
  12. Ionic Phone Number Validator: Ionic v1.x
  13. Ionic Cover Item: Ionic v1.x
  14. Ionic Timer: Ionic v1.x

Need Custom Work?

If you need help with your Ionic apps, if you need a specific plugin or integration. Let's get in touch. I'll be glad to develop or advise you for your app! Email me at icl1clabs@gmail.com.

Hey there! You'll need to log in before you can leave a comment here.

Marcus Graf

Marcus Graf   ·   4 years ago

Hey, can u give me a quick tip how to bring this to live with firebase? Iam doing something like this at the moment, but the profile picture is empty: let displayName: string = ""; let photoUrl: string = ""; let userEmail: string = ""; firebase.auth().onAuthStateChanged((user) => { if (user) { this.authData.persistUser(user); displayName = user.displayName; photoUrl = user.photoURL; userEmail = user.email; } else { this.rootPage = LoginPage; } }); // initialize the menu this.menuOptions = { header: { background: '#ccc url(./assets/menu_bg1.jpg) no-repeat top left / cover', picture: photoUrl, username: displayName, email: userEmail, },

Marcus Graf

Marcus Graf   ·   4 years ago

That looks aweful, i sent you an email ;)

Iclic Labs

Iclic Labs   ·   4 years ago

got it :) Always email me at icl1clabs@gmail.com for support requests!

Johan Walhout

Johan Walhout   ·   3 years ago

Hi, same problem here (fill the menu from Firebase) van you share me the solution please?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Dev

Dev   ·   4 years ago

Your menu look great ! Do you plan to extend it, with for exemple a mini drawer version like https://github.com/mikepenz/MaterialDrawer ?

Iclic Labs

Iclic Labs   ·   4 years ago

Hey @Statim, sorry but no plans in the near future to add a mini drawer.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Gonçalo Franco

Gonçalo Franco   ·   3 years ago

The menu works perfectly and the support is great. A small problem on iPhones was resolved in less than a week. Very satisfied.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Gonçalo Franco

Gonçalo Franco   ·   3 years ago

The menu works perfectly and the support is great. A small problem on iPhones was resolved in less than a week. Very satisfied.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Dev

Dev   ·   4 years ago

Your menu look great ! Do you plan to extend it, with for exemple a mini drawer version like https://github.com/mikepenz/MaterialDrawer ?

Iclic Labs

Iclic Labs   ·   4 years ago

Hey @Statim, sorry but no plans in the near future to add a mini drawer.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Marcus Graf

Marcus Graf   ·   4 years ago

Hey, can u give me a quick tip how to bring this to live with firebase? Iam doing something like this at the moment, but the profile picture is empty: let displayName: string = ""; let photoUrl: string = ""; let userEmail: string = ""; firebase.auth().onAuthStateChanged((user) => { if (user) { this.authData.persistUser(user); displayName = user.displayName; photoUrl = user.photoURL; userEmail = user.email; } else { this.rootPage = LoginPage; } }); // initialize the menu this.menuOptions = { header: { background: '#ccc url(./assets/menu_bg1.jpg) no-repeat top left / cover', picture: photoUrl, username: displayName, email: userEmail, },

Marcus Graf

Marcus Graf   ·   4 years ago

That looks aweful, i sent you an email ;)

Iclic Labs

Iclic Labs   ·   4 years ago

got it :) Always email me at icl1clabs@gmail.com for support requests!

Johan Walhout

Johan Walhout   ·   3 years ago

Hi, same problem here (fill the menu from Firebase) van you share me the solution please?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hey there! You'll need to log in and purchase the add-on before you can leave a rating here.

Johan Walhout   ·     ·   3 years ago

The design is good! But no response from Iclic Labs at all :(

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Johan Walhout    ·     ·   3 years ago

The design is good! But no response from Iclic Labs at all :(