Ionic CSS classes assignment

Question

I’m styling my app. Familiar with the basic theming components, SASS etc... But one thing that stands out and it not making sense is why when I preview the source in a running app how lots of extra CSS classes are added. I’m my case I am simply trying to change the menu header background. In my app.html file I have;

<ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
</ion-header>

Which translates to;

    <ion-header class="header header-md">
        <ion-toolbar class="toolbar toolbar-md">
<div class="toolbar-background toolbar-background-md" ng-reflect-klass="toolbar-background" ng-reflect-ng-class="toolbar-background-md"></div><div class="toolbar-content toolbar-content-md" ng-reflect-klass="toolbar-content" ng-reflect-ng-class="toolbar-content-md">
          <ion-title class="title title-md"><div class="toolbar-title toolbar-title-md" ng-reflect-klass="toolbar-title" ng-reflect-ng-class="toolbar-title-md">Menu</div></ion-title>
        </div></ion-toolbar>
      </ion-header>

I see that there seems to be a pattern of 'ion-element' translating to 'element element-md'. But it gets a little strange for elements such as 'ion-toolbar' as this adds a div

<div class="toolbar-background toolbar-background-md" ng-reflect-klass="toolbar-background" ng-reflect-ng-class="toolbar-background-md">

I’d like to understand how this translation process works for me I'd like to create some tidy CSS as its looking a bit unwieldy to me!

flyer · Accepted Answer · 2017-07-20 13:20:17Z

1

ion-header is an angular directive (as is ion-toolbar). Directives can have an associated HTML template and javascript. The extra classes are added by the javascript that belongs to each directive. The code below demonstrates an angular directive where a class is added to the original element. If you inspect the results you can also see an extra div being added - that is the result of the directive's template being added to the DOM.

(function() {
  var app = angular.module("soDemo", []);
  app.directive("soDirective", SoDirective);

  function SoDirective() {
    var directive = {
      restrict: 'E',
      scope: {},
      link: link,
      template: '<div class="content">My directive contents</div>'
    };
    return directive;
    ///////////////////
    function link(scope, element) {
      element.addClass('sample-class');
      
      console.log(element.html());
    }
  }
})();

.sample-class {
  display: block;
  border: 1px solid red;
}

.content {
  font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div class="sample" ng-app="soDemo">
  <so-directive></so-directive>
</div>

answered Jul 20, 2017 at 13:20

flyer

1,42412 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RedCrusador Over a year ago

aha! I'm familier with the basics of Angular so all this now makes perfect sense, great answer and code example, thanks.

JGFMK · Accepted Answer · 2017-07-20 15:53:24Z

If you look at the Header Ionic API Docs, for <ion-header> you'll see there are Sass variables for 3 platforms - the abbreviation to right of colon is used to target platform specific styling rules:

iOS : ios
Material Design (default if in browser like Chrome) :md
Windows Platform : wp

Plaform specific styles confirm that here

When you do ionic serve --lab you have the option to choose platform and get a feel for the default files render.

When you want to target CSS for specific platforms, then the nomenclature is:
[<elementname>-<platform-abbreviation>]

Here's a more complete list of SASS variables for the different Ionic Components.
In your project there is a themes/variables.scss where you can use those values. You can define your own SCSS variables like $my-padding:5px; in here and then use that in your custom component CSS, and consequently have that constant declared once and you can globally apply. So my-component.scss has

[ion-item] {
   padding: $my-padding;
}

The toolbar source folder is here.

toolbar-header.ts contains the @Directive selector 'ion-header' for <ion-header> Typescipt class name: Header

toolbar.ts contains the @Directive selector 'ion-toolbar' for <ion-toolbar> Typescript class name: Toolbar

There are scss files for the platforms..

They seem to import:

ionic.globals.scss

Furthermore you can configure things in your app-module.ts.

@ngModule({
 ....
 imports: [
   IonicModule.forRoot(MyApp, { // settings object
     iconMode: 'ios', // all platforms globally use ios icons
     tabsHighlight: true, // seems to work only on android
     platforms: {
        android: { tabsPlacement: 'top' // platform specific
        }
                }
   })

This should give you an insight

Collectives™ on Stack Overflow

Ionic CSS classes assignment

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related