Native looking app using Ionic


#1

Is it possible to create 1 app that looks native in iOS, android and Windows 8 using Ionic? I think Ionic seems very iOS looking…

There is a framework call OnsenUI , found here http://onsenui.io/ which allows you to do this by including different css files depending on the platform that the code is running on.

Is this possible?


#2

Hey,

there are (at least) 2 options:

  1. CSS : there is a class for ios and for android. As of yet there is no class for windows phone
  2. JS: via the ionic.platorm methods for detecting the platform, also windows phone. so you can set a class on the body and have specific CSS. Or you could load a different CSS file on the basis of the result.

I hope this helps :wink:


#3

CSS : there is a class for ios and for android. As of yet there is no class for windows phone

Really… Are the className called the same thing in the iOS version and Android version? Where are these css files?

I was hoping i could include a specific css file depending on the platform using this ionic.platform code…


#4

Hey,

the classes for the two platforms are .platform-ios (.platform-ios7) and .platform-android
And if I am correct, the windows phone class is .platform-windowsphone

The code for platform sniffing is in http://code.ionicframework.com/nightly/js/ionic.bundle.js so check that out.
search for ionic.Platform = { in the file and you’ll find the object.
Ionic just uses 1 huge CSS file for all platforms.

If I were you I would include a file for ios, android and windowsphone.
And either on window.load or document.ready I would run something like ionic.Platform.platform() to construct the link to the CSS you want to include:

var head = document.getElementsByTagName('head')[0], s = document.createElement('style'), platform = ionic.Platform.platform(), css = '/styles/platform-' + platform + '.css'; s.setAttribute('type', 'text/css'); if (s.styleSheet) { s.styleSheet.cssText = css; } // IE else { s.appendChild(document.createTextNode(css)); } // the world head.appendChild(s);

I didn’t test it though :wink: