facebook

How to create a side menu Using Ionic from blank?

By Subhrajit Dasgupta

How to create a side menu Using Ionic from blank?

Ionic is completely an open source SDK for the hybrid mobile app, It uses Cordova plugins to gain access to the host operating system features such as Camera, GPS, etc. We can build our apps, and customize them for Android, iOS, Windows, or modern browsers. The ionic framework is famous for its strong command-line interface which helps developers to create projects with a simple command to add Cordova plugins and front-end packages such as enable push notifications, generate app Icons, and Splash screens, etc.

We can install ionic by following this process:

1. npm install -g ionic
2. ionic start test-app(use your folder name) blank
3. cd test-app(use your folder name)
4. ionic serve

In this example, we are implementing a sidemenu using Ionic from blank. Here is a sample code for implementating Sidemenu using Ionic:

home.page.html
<ion-header>
<ion-toolbar color=”primary”>
<ion-buttons slot=”start”>
<ion-menu-toggle>
<ion-button>
<ion-icon slot=”icon-only” name=”menu”></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
<ion-title start>Ionic Side Menu</ion-title>
</ion-toolbar>
</ion-header>

<ion-content padding>

</ion-content>

app.component.html
<ion-app>
<ion-menu side=”start” menuId=”main”>
<ion-header>
<ion-toolbar color=”primary”>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
<ion-item>Menu Item</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-app>

Subhrajit Dasgupta Administrator
Front End Developer , Openweb Solutions

As a Front End Developer, I develop complex front end web applications. Using the latest web standards and integrate usability, accessibility and search engine optimization.

follow me
Posts created 2

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
shares