Ionic Events: Ionic provides inbuilt events which can be used frequently. Here we are going to explain the ionic Events. Below is list of ionic Events.

Ionic Events Example | Syntax | Demo

List of Ionic Events –

The above methods can be used frequently in your project.

How to use Events in Ionic?

You can call your defined function on any event defined above. Here we are going to explain some with example.

Call on touch
 

The above function will be called when you touch the button. The function will generate the alert message on touch event.

Ionic js Content – Ionic provides ionContent directive which comes with the beautiful feature. Ionic js content area can be configured to use ionic’s scroll or you can use browser’s scrolling. You can implement ionRefresher for pull-to-refresh and for infinite scroll functionality you can use ionInfiniteScroll directive. We are going to explain the ion js content functionality and how to use it with example and demo.

Ionic js Content Syntax

Here is an example of Ionic Content-

Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a gallery of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Ionic Backdrop : It shows the overlay above the content and below the popups, loading and other overlays. Method $ionicBackdrop.retain() and $ionicBackdrop.release() is used for backdrop in ionic. $ionicBackdrop.retain() is used to apply overlay over the content. $ionicBackdrop.release() is used to remove Ionic Backdrop from the content. Each time when $ionicBackdrop.retain() is called the $ionicBackdrop.release() method is also called. Here we are going to explain the ionic backdrop functionality with example and demo.

Ionic Backdrop

Here is syntax and example of ionic Backdrop-

.controller('MainCtrl', function($scope, $ionicBackdrop, $timeout) { 
    // Your Logic Here..
     $scope.showIonicBackdrop = function() {
    $ionicBackdrop.retain();
    $timeout(function() {
      $ionicBackdrop.release();
    }, 5000);
  };

  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  });

You first need to import service of backdrop in controller then create a function which contains the ionic retain and release method. if you run the above example it will produce the following output –

Ionic Execute Action on Backdrop Disappear/Hidden

You Can Execute Action on backdrop disappear event as below –

.controller('MainCtrl', function($scope, $ionicBackdrop, $timeout, $rootScope) { 
    // Your Logic Here..
     $scope.showIonicBackdrop = function() {
    $ionicBackdrop.retain();
    $timeout(function() {
      $ionicBackdrop.release();
    }, 5000);
  };
 
 // Add action on backdrop disappearing
  $scope.$on('backdrop.hidden', function() {
    // Your action
  });
  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  });

Ionic Execute Action on Backdrop Appear/Show

You Can Execute Action on backdrop Appear event as below –

.controller('MainCtrl', function($scope, $ionicBackdrop, $timeout, $rootScope) { 
    // Your Logic Here..
     $scope.showIonicBackdrop = function() {
    $ionicBackdrop.retain();
    $timeout(function() {
      $ionicBackdrop.release();
    }, 5000);
  };
 
 // Add action on backdrop disappearing
  $scope.$on('backdrop.shown', function() {
    // Your action
  });
  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  });

Ionic Action Sheet : Action Sheet is a slide-up pane which enables users to select one option from set of options. You can easily close the Action sheet by clicking on the backdrop or using escape key. Here we are going to explain the method to create Action Sheet in ionic framework with example and demo.

Ionic Action Sheet Example

Here we have created simple button and added event to create Action Sheet when clicked on it.

.controller('MainCtrl', function($scope, $ionicActionSheet) { 
// Is Triggered on a button click or on other event.
 $scope.myAcSheet = function() {

   // Show the action sheet
   var hideSheet = $ionicActionSheet.show({
     buttons: [
       { text: 'Btn1- Like This' },
       { text: 'Btn2- Comment' }
     ],
     destructiveText: 'Delete',
     titleText: 'Edit Profile',
     cancelText: 'Cancel',
     cancel: function() {
          // add cancel code..
        },
     buttonClicked: function(index) {
       if(index === 0){
	   // code for button 1 
	   }
	   if(index === 1){
	     // code for button 2
	   }
     }
   });
   
 };

  }, function(err) {
    console.error('ERR', err);
    // err.status will contain the status code
  });

In the above example first bind the $ionicActionSheet service with the controller which is required for Action sheet event and then created function $scope.myAcSheet(); which will trigger the pan with specified options.

Now let us call the created function in Html code.

Call Ionic Action Sheet Function

Now call the created function myAcSheet() on button click to trigger the event.

Action Sheet

If you run the above example it will produce the following output –

Action Sheet Methods

Here are following methods available in Action Sheet –

• buttons(Object)– Used to create buttons to show with a text field. Each button is an object.
• titleText(string)– This is string used to add the title of the action sheet.
• cancelText(string=)– This is string used to add text for ‘cancel’ button.
• destructiveText(string=)– The text for a ‘danger’ on the action sheet.
• cancel(function=)– This function is Called on cancel button is pressed or the backdrop is tapped or the hardware back button is pressed.
• buttonClicked(function=)– This function is Called when one of the non-destructive buttons is clicked , Buttons are identified by the index.
• destructiveButtonClicked(function=)– This is function Called when the destructive button is clicked. Return true to close the action sheet and false to keep it opened.
• cancelOnStateChange(boolean=)– This is boolean and used to cancel the action sheet on the basis of navigation state change.
• cssClass(string)-This is string to add custom CSS class.

Ionic Icons : Icons has rich icons which are free to use and open source. You can simple create icons in ionic by just adding the class .icon and it’s icon ionicon class name for the icons which you want to create for example home icon – class=”icon ion-home” is used. Feel free to use icons as you want in your application. You can also add icons in buttons. Here we are going to explain the icons utility with example and demo.

Ionic Icons List

Let us create some most common used icons in ionic-

• Home Icon –

  Add class – ion-home

• Settings Icon –

  Add class – ion-settings

• Delete Icon –

  Add class – ion-trash-a

• User Icon –

  Add class – ion-person

• Chat Icon –

  Add class – ion-chatbubble-working

• Battery Icon

  Add class – ion-battery-half

• Bluetooh Icon

  Add class – ion-bluetooth

• Image Icon

  Add class – ion-image

• Wi-Fi Icon

  Add class – ion-wifi

• Volume Icon

  Add class – ion-volume-high

• Volume Mute

  Add class – ion-volume-mute

Here an example of both text and background color-

If you run the above example it will produce the following output-

For complete list of icons please refer – Ionic Icons List

Ionic Colors : Ionic provides ready color utility which you can use frequently in you application. Ionic provides recommended naming convention for colors. It’s easy and simple to use ionic colors utility rather than adding the colors in css. You can also override the default colors. Here we are going to explain the color utility with example and demo.

Ionic Colors

Here is list of colors available in ionic Colors-

Text Colors Class

If you want to change the text color add the below css-

• .dark
• .stable-dark
• .positive
• .calm
• .balanced
• .energized
• .assertive
• .royal
• .dark

Background Colors Class

If you want to change the background color add the below css-

• .dark-bg
• .stable-dark-bg
• .positive-bg
• .calm-bg
• .balanced-bg
• .energized-bg
• .assertive-bg
• .royal-bg
• .dark-bg

Here an example of both text and background color

        

          light color(.light)
          
        
        

          stable color(.stable)
          
        
        

          positive color(.positive)
          
        
        

          calm color(.calm)
          
        
        

          balanced color(.balanced)
          
        
        

          energized color(.energized)
          
        
        

          assertive color(.assertive)
          
        
        

          royal color(.royal)
          
        
        

          dark color(.dark)
          
        
      

If you run the above example it will produce the following output-

Ionic Tabs : Tabs are basically used for navigation in mobile device. It can be placed on the top or bottom. It can contain the the links icons in top or bottom. Tabs are beautiful ways used for navigation in mobile devices. Here we are going to explain the ionic tabs with example and demo.

Syntax for Ionic Tabs

The class .tabs is used to create the tabs. Items in tab are added using the .tab class. Tab can be positioned at top or bottom of the screen.

   
         Home
   
   
         Profile
   
   
         About
   

The above example will give following output-

Ionic Tabs on Top of Screen

The class .tabs-icon-top is used to create the tabs on top of screen.

   
         Home
   
   
         Profile
   
   
         About
   

The above example will give following output-

Tabs with icons

You can add icons in ionic framework as below –

The above example will give following output-

Colored Tabs Example

You ca create colored tabs using the ionic color pattern. Here is list of colors available in ionic –

• tabs-default
• tabs-light
• tabs-stable
• tabs-positive
• tabs-calm
• tabs-balanced
• tabs-energized
• tabs-assertive
• tabs-royal
• tabs-dark

You Can use the above classes to add the color in Ionic Tabs-

The above example will give following output-