Category: ionic

Ionic – Javascript Events ”; Previous Next Various Ionic events can be used to add interactivity with users. The following table explains all the Ionic events. Event Name Event Detail on-hold Called when duration of the touch is more than 500ms. on-tap Called when duration of the touch is less than 250ms. on-double-tap Called when there is double tap touch. on-touch Called immediately when touch begins. on-release Called when touch ends. on-drag Called when touch is moved without releasing around the page in any direction. on-drag-up Called when element is dragged up. on-drag-right Called when the element is dragged to the right. on-drag-left Called when the element is dragged to the left. on-drag-down Called when the element is dragged down. on-swipe Called when any dragging has high velocity moving in any direction. on-swipe-up Called when any dragging has high velocity moving up. on-swipe-right Called when any dragging has high velocity moving to the right. on-swipe-left Called when any dragging has high velocity moving to the left. on-swipe-down Called when any dragging has high velocity moving down. Using Events Since all the Ionic events can be used the same way, we will show you how to use the on-touch event and you can just apply the same principles to the other events. To start with, we will create a button and assign an on-touch event, which will call the onTouchFunction(). <button on-touch = “onTouchFunction()” class=”button”>Test</button> Then we will create that function in our controller scope. $scope.onTouchFunction = function() { // Do something… } Now, when touch event occurs the onTouchFunction() will be called. Print Page Previous Next Advertisements ”;

Ionic – Javascript List ”; Previous Next We already discussed Ionic CSS list elements in the previous chapters. In this chapter, we will show you JavaScript lists. They allow us to use some new features like swipe, drag and remove. Using List The directives used for displaying lists and items are ion-list and ion-item as shown below. <ion-list> <ion-item> Item 1 </ion-item> <ion-item> Item 2 </ion-item> <ion-item> Item 3 </ion-item> </ion-list> The above code will produce the following screen − Delete Button This button can be added by using the ion-delete-button directive. You can use any icon class you want. Since we do not always want to show the delete buttons, because users might accidentally tap it and trigger the delete process, we can add the show-delete attribute to the ion-list and connect it with the ng-model. In the following example, we will use the ion-toggle as a model. When the toggle is on delete, the buttons will appear on our list items. <ion-list show-delete = “showDelete1”> <ion-item> <ion-delete-button class = “ion-minus-circled”></ion-delete-button> Item 1 </ion-item> <ion-item> <ion-delete-button class = “ion-minus-circled”></ion-delete-button> Item 2 </ion-item> </ion-list> <ion-toggle ng-model = “showDelete2”> Show Delete 2 </ion-toggle> The above code will produce the following screen − Reorder Button The Ionic directive for the reorder button is ion-reorder-button. The element we created has an on-reorder attribute that will trigger the function from our controller whenever the user is dragging this element. <ion-list show-reorder = “true”> <ion-item ng-repeat = “item in items”> Item {{item.id}} <ion-reorder-button class = “ion-navicon” on-reorder = “moveItem(item, $fromIndex, $toIndex)”></ion-reorder-button> </ion-item> </ion-list> $scope.items = [ {id: 1}, {id: 2}, {id: 3}, {id: 4} ]; $scope.moveItem = function(item, fromIndex, toIndex) { $scope.items.splice(fromIndex, 1); $scope.items.splice(toIndex, 0, item); }; The above code will produce the following screen − When we click the icon on the right, we can drag the element and move it to some other place in the list. Option Button The Option button is created using an ion-option-button directive. These buttons are showed when the list item is swiped to the left and we can hide it again by swiping the item element to the right. You can see in the following example that there are two buttons, which are hidden. <ion-list> <ion-item> Item with two buttons… <ion-option-button class = “button-positive”>Button 1</ion-option-button> <ion-option-button class = “button-assertive”>Button 2</ion-option-button> </ion-item> </ion-list> The above code will produce the following screen − When we swipe the item element to the left, the text will be moved left and buttons will appear on the right side. Other Functions The collection-repeat function is an updated version of the AngularJS ng-repeat directive. It will only render visible elements on the screen and the rest will be updated as you scroll. This is an important performance improvement when you are working with large lists. This directive can be combined with item-width and item-height attributes for further optimization of the list items. There are some other useful attributes for working with images inside your list. The item-render-buffer function represents number of items that are loaded after visible items. The higher this value, the more items will be preloaded. The force-refresh-images function will fix an issue with source of the images while scrolling. Both of these classes will influence the performance in a negative way. Print Page Previous Next Advertisements ”;

Ionic – Cordova InAppBrowser ”; Previous Next The Cordova InAppBrowser plugin is used to open external links from your app inside a web browser view. Using Browser It is very easy to start working with this plugin. All you need to do is to open the command prompt window and install the Cordova plugin. C:UsersUsernameDesktopMyApp>cordova plugin add org.apache.cordova.inappbrowser This step allows us to start using the inAppBrowser. We can now create a button that will lead us to some external link, and add a simple function for triggering the plugin. HTML Code <button class = “button” ng-click = “openBrowser()”>OPEN BROWSER</button> Controller Code .controller(”MyCtrl”, function($scope, $cordovaInAppBrowser) { var options = { location: ”yes”, clearcache: ”yes”, toolbar: ”no” }; $scope.openBrowser = function() { $cordovaInAppBrowser.open(”http://ngcordova.com”, ”_blank”, options) .then(function(event) { // success }) .catch(function(event) { // error }); } }) When the user taps the button the InAppBrowser will open the URL we provided. Several other methods can be used with this plugin, some of which are in the following table. Cordova $inAppBrowser Methods Method Parameters Type Details setDefaultOptions(parameter1) options object Used to set global options for all InAppBrowsers. open(parameter1, parameter2, parameter3) URL, target, options string, string, object There are three targets available. _blank will open new inAppBrowser instance. _system will open system browser and _self will use current browser instance. close / / Used to close InAppBrowser. Cordova InAppBrowser Events This plugin also offers events that can be combined with $rootScope. Example Details $rootScope.$on(”$cordovaInAppBrowser:loadstart”, function(e, event)); Called when inAppBrowser start loading the page. $rootScope.$on(”$cordovaInAppBrowser:loadstop”, function(e, event)); Called when inAppBrowser has finished loading the page. $rootScope.$on(”$cordovaInAppBrowser:loaderror”, function(e, event)); Called when inAppBrowser has encountered error. $rootScope.$on(”$cordovaInAppBrowser:exit”, function(e, event)); Called when inAppBrowser window is closed. Print Page Previous Next Advertisements ”;

Ionic – Lists ”; Previous Next Lists are one of the most popular elements of any web or mobile application. They are usually used for displaying various information. They can be combined with other HTML elements to create different menus, tabs or to break the monotony of pure text files. Ionic framework offers different list types to make their usage easy. Creating Ionic List Every list is created with two elements. When you want to create a basic list your <ul> tag needs to have the list class assigned, and your <li> tag will use the item class. Another interesting thing is that you do not even need to use <ul>, <ol> and <li> tags for your lists. You can use any other elements, but the important thing is to add list and item classes appropriately. <div class = “list”> <div class = “item”>Item 1</div> <div class = “item”>Item 2</div> <div class = “item”>Item 3</div> </div> The above code will produce the following screen − Inset List When you need a list to fill your own container, you can add the list-insets after your list class. This will add some margin to it and it will adjust the list size to your container. <div class = “list list-inset”> <div class = “item”>Item 1</div> <div class = “item”>Item 2</div> <div class = “item”>Item 3</div> </div> The above code will produce the following screen − Item Dividers Dividers are used for organizing some elements into logical groups. Ionic gives us item-divider class for this. Again, like with all the other Ionic elements, we just need to add the item-divider class after the item class. Item dividers are useful as a list header, since they have stronger styling than the other list items by default. <div class = “list”> <div class = “item item-divider”>Item Divider 1</div> <div class = “item”>Item 1</div> <div class = “item”>Item 2</div> <div class = “item”>Item 3</div> <div class = “item item-divider”>Item Divider 2</div> <div class = “item”>Item 4</div> <div class = “item”>Item 5</div> <div class = “item”>Item 6</div> </div> The above code will produce the following screen − Adding Icons We already showed you how to add icons to your buttons. When adding icons to the list items, you need to choose what side you want to place them. There are item-icon-left and item-icon-right classes for this. You can also combine those two classes, if you want to have your Icons on both the sides. Finally, there is the item-note class to add a text note to your item. <div class = “list”> <div class = “item item-icon-left”> <i class = “icon ion-home”></i> Left side Icon </div> <div class = “item item-icon-right”> <i class = “icon ion-star”></i> Right side Icon </div> <div class = “item item-icon-left item-icon-right”> <i class = “icon ion-home”></i> <i class = “icon ion-star”></i> Both sides Icons </div> <div class = “item item-icon-left”> <i class = “icon ion-home”></i> <span class = “text-note”>Text note</span> </div> </div> The above code will produce the following screen − Adding Avatars and Thumbnails Avatars and thumbnails are similar. The main difference is that avatars are smaller than thumbnails. These thumbnails are covering most of the full height of the list item, while avatars are medium sized circle images. The classes that are used are item-avatar and item-thumbnail. You can also choose which side you want to place your avatars and thumbnails as shown in the thumbnail code example below. <div class = “list”> <div class = “item item-avatar”> <img src = “my-image.png”> <h3>Avatar</h3> </div> <div class = “item item-thumbnail-left”> <img src = “my-image.png”> <h3>Thumbnail</h3> </div> </div> The above code will produce the following screen − Print Page Previous Next Advertisements ”;

Ionic – Forms ”; Previous Next Ionic forms are mostly used for interaction with users and collecting needed info. This chapter will cover various text input forms and in our subsequent chapters, we will explain how to use other form elements using the Ionic framework. Using Input Form The best way to use forms is to use list and item as your main classes. Your app will usually consist more than one-form element, so it makes sense to organize it as a list. In the following example, you can notice that the item element is a label tag. You can use any other element, but a label will provide the ability to tap on any part of the element to focus your text input. You can set a placeholder that will look different from the input text and it will be hidden as soon as you start typing. You can see this in the example below. <div class = “list”> <label class = “item item-input”> <input type = “text” placeholder = “Placeholder 1” /> </label> <label class = “item item-input”> <input type = “text” placeholder = “Placeholder 2” /> </label> </div> The above code will produce the following screen − Ionic Labels Ionic offers some other options for your label. You can use the input-label class, if you want your placeholder to be on the left side when you type the text. <div class = “list”> <label class = “item item-input”> <input type = “text” placeholder = “Placeholder 1” /> </label> <label class = “item item-input”> <input type = “text” placeholder = “Placeholder 2” /> </label> </div> The above code will produce the following screen − Stacked Label Stacked label is the other option that allows moving your label on top or the bottom of the input. To achieve this, we will add the item-stacked-label class to our label element and we need to create a new element and assign the input-label class to it. If we want it to be on top, we just need to add this element before the input tag. This is shown in the following example. Notice that the span tag is before the input tag. If we changed their places, it would appear below it on the screen. <div class = “list”> <label class = “item item-input item-stacked-label”> <span class = “input-label”>Label 1</span> <input type = “text” placeholder = “Placeholder 1” /> </label> <label class = “item item-input item-stacked-label”> <span class = “input-label”>Label 2</span> <input type = “text” placeholder = “Placeholder 2” /> </label> </div> The above code will produce the following screen − Floating Label Floating labels are the third option we can use. These labels will be hidden before we start typing. As soon the typing starts, they will appear on top of the element with nice floating animation. We can use floating labels the same way as we used stacked labels. The only difference is that this time we will use item-floating-label class. <div class = “list”> <label class = “item item-input item-floating-label”> <span class = “input-label”t>Label 1</span> <input type = “text” placeholder = “Placeholder 1” /> </label> <label class = “item item-input item-floating-label”> <span class = “input-label”>Label 2</span> <input type = “text” placeholder = “Placeholder 2” /> </label> </div> The above code will produce the following screen − Inset inputs In our last chapter, we discussed how to inset Ionic elements. You can also inset an input by adding the item-input-inset class to your item and the item-input-wrapper to your label. A Wrapper will add additional styling to your label. If you add some other elements next to your label, the label size will adjust to accommodate the new element. You can also add elements inside your label (usually icons). The following example shows two inset inputs. The first one has a button next to the label, and the second one has an icon inside it. We used the placeholder-icon class to make the icon with the same color as the placeholder text. Without it, the icon would use the color of the label. <div class = “list”> <div class = “item item-input-inset”> <label class = “item item-input-wrapper”> <input type = “text” placeholder = “Placeholder 1” /> </label> <button class = “button”>button</button> </div> <div class = “item item-input-inset”> <label class = “item item-input-wrapper”> <i class = “icon ion-edit placeholder-icon”></i> <input type = “text” placeholder = “Placeholder 2″ /> </label> </div> </div> The above code will produce the following screen − Print Page Previous Next Advertisements ”;

Ionic – Javascript Header ”; Previous Next This is the Ionic directive, which will add the header bar. Using JavaScript Header To create a JavaScript header bar, we need to apply the ion-header-bar directive in the HTML file. Since the default header is white, we will add title, so it will be showed on white background. We will add it to our index.html file. <ion-header-bar> <h1 class = “title”>Title!</h1> </ion-header-bar> The above code will produce the following screen − Styling Header Just like the CSS Header Bar, the JavaScript counterpart can be styled in a similar fashion. To apply color, we need to add a color class with a bar prefix. Therefore, if we want to use a blue header, we will add a bar-positive class. We can also move the title to one side of the screen by adding the align-title attribute. The values for this attribute can be center, left or right. <ion-header-bar align-title = “left” class = “bar-positive”> <h1 class = “title”>Title!</h1> </ion-header-bar> The above code will produce the following screen − Adding Elements You will usually want to add some elements to your header. The following example shows how to place a button on the left side and an icon to the right side of the ion-header-bar. You can also add other elements to your header. <ion-header-bar class = “bar-positive”> <div class = “buttons”> <button class = “button”>Button</button> </div> <h1 class = “title”>Title!</h1> <div class = “buttons”> <button class = “button icon ion-home”></button> </div> </ion-header-bar> The above code will produce the following screen − Adding Sub Header A Sub header is created when a bar-subheader class is added to the ion-header-bar. We will add a bar-assertive class to apply red color to our sub header. <ion-header-bar class = “bar-positive”> <div class = “buttons”> <button class = “button”>Button</button> </div> <h1 class = “title”>Title!</h1> <div class = “buttons”> <button class = “button icon ion-home”></button> </div> </ion-header-bar> <ion-header-bar class = “bar-subheader bar-assertive”> <h1 class = “title”>Subheader</h1> </ion-header-bar> The above code will produce the following screen − Print Page Previous Next Advertisements ”;

Ionic – Toggle ”; Previous Next Sometimes there are two options available for the users. The most efficient way to handle this situation is through toggle forms. Ionic gives us classes for toggle elements that are animated and easy to implement. Using Toggle Toggle can be implemented using two Ionic classes. First, we need to create a label for the same reason we explained in the previous chapter and assign a toggle class to it. Inside our label will be created . You will notice two more ionic classes used in the following example. The track class will add background styling to our checkbox and color animation when the toggle is tapped. The handle class is used to add a circle button to it. The following example shows two toggle forms. The first one is checked, the second one is not. <label class = “toggle”> <input type = “checkbox” /> <div class = “track”> <div class = “handle”></div> </div> </label> <br> <label class = “toggle”> <input type = “checkbox” /> <div class = “track”> <div class = “handle”></div> </div> </label> The above code will produce the following screen − Multiple Toggles Most of the time when you want to add more than one element of the same kind in Ionic, the best way is to use list items. The class that is used for multiple toggles is the item-toggle. The next example shows how to create a list for toggles. The first one and the second one are checked. <ul class = “list”> <li class = “item item-toggle”> Toggle 1 <label class = “toggle”> <input type = “checkbox” /> <div class = “track”> <div class = “handle”></div> </div> </label> </li> <li class = “item item-toggle”> Toggle 2 <label class = “toggle”> <input type = “checkbox” /> <div class = “track”> <div class = “handle”></div> </div> </label> </li> <li class = “item item-toggle”> Toggle 3 <label class = “toggle”> <input type = “checkbox” /> <div class = “track”> <div class = “handle”></div> </div> </label> </li> <li class = “item item-toggle”> Toggle 4 <label class = “toggle”> <input type = “checkbox” /> <div class = “track”> <div class = “handle”></div> </div> </label> </li> </ul> The above code will produce the following screen − Styling Toggle All the Ionic color classes can be applied to the toggle element. The Prefix will be the toggle. We will apply this to the label element. The following example shows all the colors that are applied. <ul class = “list”> <li class = “item item-toggle”> Toggle Light <label class = “toggle toggle-light”> <input type = “checkbox” /> <div class = “track”> <div class = “handle”></div> </div> </label> </li> <li class = “item item-toggle”> Toggle Stable <label class = “toggle toggle-stable”> <input type = “checkbox” /> <div class = “track”> <div class = “handle”></div> </div> </label> </li> <li class = “item item-toggle”> Toggle Positive <label class = “toggle toggle-positive”> <input type = “checkbox” /> <div class = “track”> <div class = “handle”></div> </div> </label> </li> <li class = “item item-toggle”> Toggle Calm <label class = “toggle toggle-calm”> <input type = “checkbox” /> <div class = “track”> <div class = “handle”></div> </div> </label> </li> <li class = “item item-toggle”> Toggle Balanced <label class = “toggle toggle-balanced”> <input type = “checkbox” /> <div class = “track”> <div class = “handle”></div> </div> </label> </li> <li class = “item item-toggle”> Toggle Energized <label class = “toggle toggle-energized”> <input type = “checkbox” /> <div class = “track”> <div class = “handle”></div> </div> </label> </li> <li class = “item item-toggle”> Toggle Assertive <label class = “toggle toggle-assertive”> <input type = “checkbox” /> <div class = “track”> <div class = “handle”></div> </div> </label> </li> <li class = “item item-toggle”> Toggle Royal <label class = “toggle toggle-royal”> <input type = “checkbox” /> <div class = “track”> <div class = “handle”></div> </div> </label> </li> <li class = “item item-toggle”> Toggle Dark <label class = “toggle toggle-dark”> <input type = “checkbox” /> <div class = “track”> <div class = “handle”></div> </div> </label> </li> </ul> The above code will produce the following screen − Print Page Previous Next Advertisements ”;

Ionic – Padding ”; Previous Next Ionic offers an easy way to add padding to elements. There are couple of classes that can be used and all of them will add 10px between border of element and its content. The following table displays all the available padding classes. Padding Classes Class Name Class Info padding Adds padding around every side. padding-vertical Adds padding to the top and bottom. padding-horizontal Adds padding to the left and right. padding-top Adds padding to the top. padding-right Adds padding to the right. padding-bottom Adds padding to the bottom. padding-left Adds padding to the left. Using Padding When you want to apply some padding to your element, you just need to assign one of the classes from the table above. The following example shows two block buttons. The first one is using the padding class and the second one does not. You will notice that the first button is larger, since it has 10px padding applied. <div class = “button button-block padding”>Padding</div> <div class = “button button-block”>No padding</div> The above code will produce the following screen − Print Page Previous Next Advertisements ”;

Ionic – Javascript Footer ”; Previous Next This directive will add a footer bar at the bottom of the screen. Using Footer The Ionic footer can be added by applying an ion-footer-bar class. Working with it is same as working with header. We can add a title and place it on the left, center or right side of the screen by using the align-title attribute. With the prefix bar, we can use the Ionic colors. Let us create a red colored footer with the title in the center. <ion-footer-bar align-title = “center” class = “bar-assertive”> <h1 class = “title”>Title!</h1> </ion-footer-bar> The above code will produce the following screen − Adding Elements We can add buttons icons or other elements to the ion-footer-bar and their styling will be applied. Let us add a button and an Icon to our footer. <ion-footer-bar class = “bar-assertive”> <div class = “buttons”> <button class = “button”>Button</button> </div> <h1 class = “title”>Footer</h1> <div class = “buttons”> <button class = “button icon ion-home”></button> </div> </ion-footer-bar> The above code will produce the following screen− Adding Sub Footer We showed you how to use a sub header. The same way a sub footer can be created. It will be located above the footer bar. All we need to do is add a bar-subfooter class to our ion-footer-bar element. In example that follows, we will add the sub-footer above the footer bar, which we previously created. <ion-footer-bar class = “bar-subfooter bar-positive”> <h1 class = “title”>Sub Footer</h1> </ion-footer-bar> <ion-footer-bar class = “bar-assertive”> <div class = “buttons”> <button class = “button”>Button</button> </div> <h1 class = “title”>Footer</h1> <div class = “buttons” ng-click = “doSomething()”> <button class = “button icon ion-home”></button> </div> </ion-footer-bar> The above code will produce the following screen − Print Page Previous Next Advertisements ”;

Ionic – Header ”; Previous Next The Ionic header bar is located on top of the screen. It can contain title, icons, buttons or some other elements on top of it. There are predefined classes of headers that you can use. You can check all of it in this tutorial. Adding Header The main class for all the bars you might use in your app is bar. This class will always be applied to all the bars in your app. All bar subclasses will use the prefix – bar. If you want to create a header, you need to add bar-header after your main bar class. Open your www/index.html file and add the header class inside your body tag. We are adding a header to the index.html body because we want it to be available on every screen in the app. Since bar-header class has default (white) styling applied, we will add the title on top of it, so you can differentiate it from the rest of your screen. <div class = “bar bar-header”> <h1 class = “title”>Header</h1> </div> The above code will produce the following screen − Header Colors If you want to style your header, you just need to add the appropriate color class to it. When you style your elements, you need to add your main element class as prefix to your color class. Since we are styling the header bar, the prefix class will be bar and the color class that we want to use in this example is positive (blue). <div class = “bar bar-header bar-positive”> <h1 class = “title”>Header</h1> </div> The above code will produce the following screen − You can use any of the following nine classes to give a color of your choice to your app header − Color Class Description Result bar-light To be used for white color   bar-stable To be used for light grey color   bar-positive To be used for blue color   bar-calm To be used for light blue color   bar-balanced To be used for green color   bar-energized To be used for yellow color   bar-assertive To be used for red color   bar-royal To be used for violet color   bar-dark To be used for black color   Header Elements We can add other elements inside the header. The following code is an example to add a menu button and a home button inside a header. We will also add icons on top of our header buttons. <div class = “bar bar-header bar-positive”> <button class = “button icon ion-navicon”></button> <h1 class = “title”>Header Buttons</h1> <button class = “button icon ion-home”></button> </div> The above code will produce the following screen − Sub Header You can create a sub header that will be located just below the header bar. The following example will show how to add a header and a sub header to your app. Here, we have styled the sub header with an “assertive” (red) color class. <div class = “bar bar-header bar-positive”> <button class = “button icon ion-navicon”></button> <h1 class = “title”>Header Buttons</h1> <button class = “button icon ion-home”></button> </div> <div class = “bar bar-subheader bar-assertive”> <h2 class = “title”>Sub Header</h2> </div> The above code will produce the following screen − When your route is changed to any of the app screens, you will notice that the header and the sub header are covering some content as shown in the screenshot below. To fix this you need to add a ‘has-header’ or a ‘has-subheader’ class to the ion-content tags of your screens. Open one of your HTML files from www/templates and add the has-subheader class to the ion-content. If you only use header in your app, you will need to add the has-header class instead. <ion-content class = “padding has-subheader”> The above code will produce the following screen − Print Page Previous Next Advertisements ”;