
Miscellaneous components
There are some extra utility and miscellaneous components available in Ionic Framework. The components can be in the form of directives or services.
$ionicPosition
It is a utility service used to retrieve the position of DOM elements. This can be used to position elements absolutely over the screen. It has two methods available, position
and offset
, which fetch the position relative to its parent or relative to the document respectively. The methods return an object containing the properties top, left, width, and height.
$ionicConfigProvider
Ionic has a lot of default configurations and styles for different platforms. For example, in iOS, the tab bar is shown below by default, and in Android, the tab bar is shown on top. The Ionic platform exposes a provider to manage these configurations, which is called $ionicConfigProvider
. This provider can be used during the config phase of your Angular app. The configuration is, by default, set for the specific platform.
The following is the usage of this variable:
var myApp = angular.module('MyApp', ['ionic']); myApp.config(function($ionicConfigProvider) { $ionicConfigProvider.views.maxCache(5); $ionicConfigProvider.backButton.text('Go Back').icon('ion-chevron-left'); });
A list of different configurations that can be set using this provider are as follows:
views.transition(transition)
: Animation style while viewing transitionsscrolling.jsScrolling(booleanValue)
: Setting usage for native JS scrolling or notbackButton.icon(value)
: Setting the back button iconbackButton.text(value)
: Setting the text for back buttontabs.position(value)
: Setting the position of tabs out of top or bottomnavBar.alignTitle(value)
: Setting the alignment side for the navbar's titlespinner.icon(value)
: Setting the default icon for the spinner