.
104-Ionic1 Official-Platform Customization
Platform Customization
Ionic already includes some platform-based customization, but sometimes you need your project to be even more customized. There are a few different ways you can use the platform to style an app. Learn how to implement platform classes, use JS to style your app, or use dynamic templates in the documentation below.
- Platform Classes
- Styling Using AngularJS
- Dynamic Templates
1. Platform Classes
Ionic automagically adds classes to the <body> of your project based on the device you are using to view the project. This means if you are viewing your app on an iOS device, the <body> will have the platform-ios class applied. Some information about the different classes can be found below.
Platform Device Classes
ionic.Platform is used to retrieve the device information and apply classes to the <body> of the project. These classes are used by the Ionic SDK to give the project a platform specific look and feel, and can be used by you to override styles.
Platform
|
Class
|
Description
|
Browser
|
platform-browser
|
Whether the application is running on the Desktop Browser - applied if you are running ionic serve
|
Cordova
|
platform-cordova
|
Whether the application is running on the device, as the device uses Cordova to display the application
|
Webview
|
platform-webview
|
Whether the application is running within a webview on the device within a native application
|
iOS
|
platform-ios
|
The device is iOS; therefore, the "look and feel" will be given the iOS treatment
|
iPad
|
platform-ipad
|
iOS device is an iPad - this class is applied, in addition toplatform-ios
|
Android
|
platform-android
|
The device is Android; therefore, the "look and feel" will be given the Android treatment
|
Windows Phone
|
platform-windowsphone
|
The device is Windows Phone; therefore, the "look and feel" will be given the Windows Phone treatment
|
Platform OS Version Classes
Ionic also adds classes based on the OS version. This can be used to customize your project for a specific OS version. A class is added for the major version and the major + minor versions.
The class is created by looking at the User Agent of the OS version. The major + minor class is created by replacing the . separating the major and minor version numbers with a _. So, if you are running your project on a device running iOS 8.4, it will add the platform-ios8and platform-ios8_4 classes. Below are some example classes, but you are not limited to these.
Platform OS Version
|
Class
|
Description
|
iOS 8
|
platform-ios8
|
The OS on the device is running iOS 8
|
iOS 8.4
|
platform-ios8_4
|
The OS on the device is running iOS 8.4. This class is applied in addition to platform-ios8
|
Android 4
|
platform-android4
|
The OS on the device is running Android 4
|
Android 4.4
|
platform-android4_4
|
The OS on the device is running Android 4.4. This class is applied, in addition to platform-android4
|
Using Platform Classes to Override Styling
You can use any of the above classes to override Ionic styling. For example, if you wanted to override the header title on Android to be uppercase, you could use the following code:
.platform-android .bar-header {
text-transform: uppercase;
}
text-transform: uppercase;
}
This would uppercase the title for Android, but any other device would remain lowercase.
You could even go as far as customizing the side menu style based on the platform. The possibilities are endless!
2. Styling using AngularJS
The ionic.Platform utility can be used in your JavaScript controller to set the platform for your app. For the following examples, we assume you have a controller called AppCtrl encapsulating your project.
Setting the Platform
In your AppCtrl controller, retrieve and set the platform using ionic.Platform:
.controller('AppCtrl', function($scope) {
$scope.platform = ionic.Platform.platform();
})
$scope.platform = ionic.Platform.platform();
})
Using the Platform to Dynamically Style Elements
You can then use this platform to change which elements display and what classes get added to specific elements. For example, if you’re using the tabs structure, and you want to change the way the tabs look on Android but keep the same look and feel for all other devices, you can use Angular’s ng-class to dynamically add classes based on the platform. Adding the following to the <ion-tabs> directive will add the tabs-positive class for Android platforms and the tabs-icon-top class to all devices but Android:
<ion-tabs class="tabs-stable" ng-class="{'tabs-positive': platform == 'android', 'tabs-icon-top': platform != 'android'}">
<!-- ion-tab directives go here -->
</ion-tabs>
You can also use Angular’s ng-attr to dynamically define attributes based on platform. For example, you may want the icons in the tabs to show on all devices except Android. You can dynamically add the icon by using the ng-attr-icon property. To define an icon for all devices minus Android on the “Home” tab, you could use the following code:
<!-- if the platform is android don't add an icon, all other devices get an icon -->
<ion-tab title="Home" ng-attr-icon="{{ platform != 'android' ? 'ion-home' : undefined}}" href="#/tab/home">
3. Dynamically Loading Templates
Sometimes showing or changing elements based on the platform isn’t enough. There may be times when you need to use two different structures for your project, and you don’t want to place the logic in the HTML. In these cases, you can use ionic.Platform to decide which template to load in a given state. For example, the following code will load the templates/home-android.html file if the platform is Android, andtemplates/home.html for all other platforms:
.state('tab', {
url: "/tab",
abstract: true,
controller: 'AppCtrl',
templateUrl: function() {
if (ionic.Platform.isAndroid()) {
return "templates/home-android.html";
}
return "templates/home.html";
}
})
url: "/tab",
abstract: true,
controller: 'AppCtrl',
templateUrl: function() {
if (ionic.Platform.isAndroid()) {
return "templates/home-android.html";
}
return "templates/home.html";
}
})
Merges Directory
The merges directory is no longer added by default in a project, but it is still a powerful tool in customizing your app. You can create this directory at the top level of your project, alongside the www andplatforms directory. From the Cordova docs:
The top-level merges directory offers a place to specify assets to deploy on specific platforms. Each platform-specific subdirectory within merges mirrors the directory structure of the www source tree, allowing you to override or add files as needed.
For example, if you wanted to have a platform-specific index.html file, you would create the following directory structure:
merges/
ios/
index.html
android/
index.html
ios/
index.html
android/
index.html
If you wanted to have platform-specific styles or javascript, you could override those, too:
merges/
ios/
index.html
css/
platform.css
js/
app.js
android/
index.html
css/
platform.css
js/
app.js
ios/
index.html
css/
platform.css
js/
app.js
android/
index.html
css/
platform.css
js/
app.js
Cordova will copy the platform specific files to the www directory in the platforms directory when you run the app. Note that you will not be able to see these differences in the browser, only when you run the app on a device or simulator.
No comments:
Post a Comment