Tuesday, September 13, 2016

STEP BY STEP IONIC TUTORIALS PART IV



In current Ionic Framework has one of the most comprehensive SDK (software development kit) for making advanced hybrid mobile app development. On our tutorials, last week we learned about some more basics of Ionic Framework like ionic dropdown select, ionic tabs demo, Ionic Grid Structure, Icons and colors. For this week we are moving on Ionic Tutorials with more functions like Action Sheet, Backdrop, JS Content, Ion-refresher, Ionic Events and Ionic keyboard.

IONIC ACTION SHEET
Action Sheet is part of the slide panel which comes up from the bottom/side navigation for multiple options to choose from by user in mobile application. Clicking the back/escape key usually takes the user back to recent app-screen. Find here ionic action sheet example with syntax, functions and various action sheet methods available i.e. button, titletext, canceltext etc. 

IONIC BACKDROP
Ionic Backdrop functionality is used for showing the overlay on the content screen which is just like intro-screen to the user. Ionic ‘retain and release method’ is implemented after importing the backdrop service. Check out the basic ionic backdrop example with syntax and more info on how to hide and show this functionality.

IONIC JS CONTENT
There is ionContent default provided in this framework for using scrolling related to the viewers screen. Content is put inside these specific tags for displaying in the browser’s screen. Infinite scrolling can be applied there using ionInfiniteScroll directive and ionRefresher for pull-to-refresh content respectively as the flowchart of the app demands.



IONIC ION-REFRESHER
In this mobile app framework Ion-refresher is the basic component for pull to refresh for scroll to view. This part of ionic refresher just puts the content inside the ionicContent or ionicScroll element. Find more about the syntax, html part of this amazing functionality at our ion-refresher example.  This concept is perfectly suited to feed new list items from 3rd part sites i.e. Social Media Feed.

IONIC EVENTS
There are many in-built Ionic Events that are commonly used in the app development like on-hold, on-tap, on-double-tap, on-touch, on-release, on-drag, on-drag-up, on-swipe etc these all are basic functionality events. Learn how to use these basic ionic events with example now!

IONIC KEYBOARD
Ionic Keyboard is the functionality to call this input method from user whenever there is need for it. Keyboard automatically comes up when there is need to enter some input through keyboard. Main element has to be in the scroll’s view or directive through content to call this keyboard functionality in Ionic Framework. There are some specific classes attached to this custom functionality to alter its default behaviour i.e. Hide-on-keyboard-open when used this hides the div completely.

This was all for this week from next week we will move to next part of the Ionic Tutorials which includes Ionic Loading, Modal, Navigation, ionic Popover, Ionic Popup, Ionic Scroll, Infinite Scroll and Ionic Side Menus. This will finish the basic learning portion of your Ionic Framework. We hope you have taken the initial inputs on how Ionic functions and use them in advance practices for developing mobile application. 

No comments:

Post a Comment