All geek questions in one place

Assigning Ionic CSS Classes

Im the style of my application. Familiar with the main thematic components, SASS, etc. But one thing that stands out, and that doesn't make sense, is why when I look at the source in a running application, how many extra CSS classes are added. In my case, I'm just trying to change the background of the menu title. In my app.html file, I have:

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

What does it mean:

    <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 an "ionic element" translating "element element-md". But this is a bit strange for elements like the "ionic 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 like to understand how this translation process works for me. I would like to create some neat CSS as it looks a little bulky for me!

0
2

- angular ( ). HTML- javascript. javascript, . angular, . , div - 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>
Hide result
+1

Ion API Docs, <ion-header> Sass - :

  • iOS: ios
  • ( , , Chrome): md
  • Windows: wp

, , ,

ionic serve --lab, .

, :
[<elementname>-<platform-abbreviation>]

SASS .
themes/variables.scss, . SCSS, $my-padding:5px;, CSS , , , . , my-component.scss

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

.

toolbar-header.ts @Directive selector 'ion-header' <ion-header> Typecipt:

toolbar.ts @Directive " " <ion-toolbar> Typescript :

scss .

, :

, -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
        }
                }
   })

0

Source: https://habr.com/ru/post/1676564/

More articles:


All Articles