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>
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.
