└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Ionic Platform Body Classes 2 | Document to describe the different platform classes applied to document body by `ionic.Platform`. 3 | 4 | ## Contribute 5 | Please submit PRs with any missing classes that adds a new row on the tables below. 6 | 7 | # Platform Classes 8 | `ionic.Platform` is a utility for providing meta information about the current device, it examines the User Agent, Navigator and Document status to populate device information obtained from `org.apache.cordova.device` and adds classes to `body`. 9 | 10 | These classes allow Ionic to apply certain styles, polyfills and actions based on the platform. Commonly used to provide a platform specific 'look and feel'. 11 | 12 | ## Device Grades 13 | Ionic determines a device grade based on the availability of web APIs and CSS features, whilst also taking into account the device's OS capabilities. 14 | 15 | `ionic.Platform#setGrade - ionic.bundle.js` 16 | >Set the grade of the device: 'a', 'b', or 'c'. 'a' is the best 17 | >(most css features enabled), 'c' is the worst. By default, sets the grade 18 | >depending on the current device. 19 | 20 | 21 | | Grade | Class | Description | 22 | | ------------- |----------------| --------------| 23 | | A | `grade-a` | All platforms are Grade A by default, based on CSS features being available and Web APIs. | 24 | | B | `grade-b` | Windows Phone is determined as Grade B by default. Android versions lower than 4.4 are graded as B also. | 25 | | C | `grade-c` | Android OS Versions lower than Version 4 are Grade C by default | 26 | 27 | 28 | ## Platforms 29 | Ionic examines `window.Navigator` and `User Agent` to determine the platform your application is running under. Platform classes determine the "look and feel" of your application enabling automatically the relevant state transitions and iconography. 30 | 31 | | Platform | Class | Description | 32 | | ------------- |-------------| --------------| 33 | | Browser | `platform-browser` | Whether the application is running on the Desktop Browser - applied if you are running `ionic serve` | 34 | | Cordova | `platform-cordova` | Whether the application is running on the device, as the device uses Cordova to display the application | 35 | | Webview | `platform-webview` | Whether the application is running within a webview on the device within a native application | 36 | | iOS | `platform-ios` | The device is iOS based, therefore the "look and feel" will be given the iOS treatment | 37 | | Android | `platform-android` | The device is Android based, therefore the "look and feel" will be given the Android treatment | 38 | | Windows Phone | `platform-windowsphone` | The device is Windows Phone based, therefore the "look and feel" will be given the Windows Phone treatment | 39 | 40 | ### Platform OS Meta Classes 41 | Ionic also applies OS meta classes which determine the version of platform OS and if iOS based, whether it's an iPhone, iPod or iPad. 42 | 43 | | Platform OS Meta | Class | Description | 44 | | ------------- |-------------| --------------| 45 | | iPad | `platform-ipad` | iOS device is an iPad - this will apply additional styles to menus etc | 46 | | iPod | `platform-ipod` | iOS device is an iPod | 47 | 48 | #### Platform OS Version Classes 49 | Ionic also adds meta classes to determine the OS version, this can be used to fallback onto a more relevant "look and feel" or to accomodate for OS restrictions for that Version. 50 | 51 | The version is formed by examing the `User Agent` of OS version and replacing the `.` with a `_` that separates the Major and Minor version numbers. e.g. `7.1` will be `7_1` 52 | 53 | | Platform OS Version | Class | 54 | | ------------- |-------------| 55 | | iOS 4.2 | `platform-ios4_2` | 56 | | iOS 8.0 | `platform-ios8_1` | 57 | | Android 4.4| `platform-android4_4` | 58 | 59 | ### Platform Meta Classes 60 | Ionic also applies meta classes which determine whether a device is ready, displayed fullscreen or whether to add additional padding for the status bar to header bars. 61 | 62 | | Platform Meta Property| Class | Description | 63 | | ------------- |-------------|----------| 64 | | Ready | `platform-ready` | The platform/Device is ready, Assets and the DOM have loaded. | 65 | | Full Screen | `fullscreen` | The application is displayed fullscreen on the device and will show the status bar, requires `org.apache.cordova.statusbar` to be enabled | 66 | | Hide Status Bar| `status-bar-hide` | Hides the status bar when in fullscreen mode on the device, requires `org.apache.cordova.statusbar` to be enabled| 67 | --------------------------------------------------------------------------------