CODEWITHSUNDEEP
javascriptangularjsionic-framework
David Prieto
David Prieto

Reputation: 2289

How to specify Ionic features look style?

The Ionic framework customizes the looks of its features according to which plataform is running the app, Android or iOS, but I know it also has a third look that is unique to Ionic.

My question is, is there a way to specify how and especific feature should look like? Like if I want Popovers to look Android style and Action Sheets to look iOS style, all in the same app, no matter to which platform the app is been build?

There has to be a way, otherwise there wouldn't be an Ionic style for things, like in this example: http://codepen.io/ionic/pen/GpCst

I have tried the setPlatform function like the example without success.

$scope.setPlatform = function(p) {
  document.body.classList.remove('platform-ios');
  document.body.classList.remove('platform-android');
  document.body.classList.add('platform-' + p);
  $scope.demo = p;
}

Upvotes: 0

Views: 1459

Answers (1)

Jeremy Wilken
Jeremy Wilken

Reputation: 6976

There are a few ways to do things like this, but it should be clear that there are limits to what Ionic supports out of the box for platform specific design. When it comes to choosing iOS specific styling for one component and Android styling for another, you can get into some difficult situations.

Some components have config options.

Look at http://ionicframework.com/docs/api/provider/$ionicConfigProvider/ and you'll see some components that can be configured globally such as tabs, navbars, form elements, and perhaps others in the future.

You can target your CSS to modify a component by platform

You've already seen the body has a platform-ios or platform-android class applied depending on the device. You could manually change the class depending on the view. However, its applied to the body so the entire current view will have to adopt the same ios or android styling. Better yet, you can just write CSS to override the existing styles to make it as you see fit (and Ionic encourages this). Some things are also possible to control if you modify Sass variables and rebuild the Ionic CSS using the Sass build feature.

Selectively use components

You could detect the platform in your controllers to determine if you should use a popover on android or action sheet for ios. http://ionicframework.com/docs/api/utility/ionic.Platform/ It would be a logical condition in your controller to first check the platform, and then trigger the appropriate component.

That covers the primary ways that I've come across. You can of course target your own CSS to override the default values with your own designs to disregard the platform design continuity features. These are covered in my book Ionic in Action if you want some examples and more detail.

Upvotes: 3

Related Questions