Posts

login design ionic | How design a responsive login page in ionic angular

Image
login design ionic | How design a responsive login page in ionic angular In this login design ionic tutorial we will learn how to design a responsive login and register page in ionic. Most of beginners think how to start design a login page in ionic and apply css to it. Ionic design is same as html design but some tags are different than simple html. like ion-row, ion-col, ion-grid, ion-icon etc. Here we will skip project creation as it is explained in previous blog. For installation and project creation see the blog How install ionic and develop first application So lets start- Create a page and write the below code in .html file I have used cdn link here for fontawesome. < link   rel = "stylesheet"   href = "https://cdnjs.cloudflare.com/ajax/libs/ font-awesome/4.7.0/css/font-awesome.min.css" > < ion-content   class = "main_content" >       < div   class = "container_home" >      < div   class = "fo...

What is ionic framework

Image
Ionic Framework is an open source UI toolkit for building high-quality well performing mobile and desktop apps using web technologies (HTML, CSS, and JavaScript).Ionic Framework is focused on the frontend user experience, or UI interaction of an app (controls, interactions, gestures, animations). It’s easy to learn, and integrates nicely with other libraries or frameworks, such as Angular, or can be used standalone without a frontend framework using a simple script include. Ionic 3 vs ionic 4: 1.There are great changes in the navigation and in the Router, which are a big update. 2. Ionic 3 used a navigation based on a simple stack where the new pages were pushed on top of the stack and when we wanted to navigate backwards we simply made a pop of the last page. 3. In Ionic 4 The Angular Router is one of the most important libraries from an Angular application. Without it, apps would not be able to maintain their navigation state on browser reloads. Purpose of Ionic ...

How install Ionic and develop first application

Image
How Install Ionic:  Before proceeding we must have to download and install node.js (recommended for most users), make sure the latest version of Node.js and npm are installed. To check version, type on command prompt.  node --version npm--version Install the Ionic CLI (Command Line Interface) $ npm install -g ionic  // write on command prompt g here stands for globally and  npm - node package manager. All required packages are downloaded to the system.  What is ionic CLI? The Ionic CLI is built with TypeScript and Node.js. CLI is a inbuilt tool provide interface to developer such as installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. Start an App : Ionic provide two default template or starter tabs and sidemenu . We can use blank for fresh blank project. Create an Ionic app using one of the pre-made app templates, or a blank one to start fresh. The three mo...