离子 CSS 类分配答案

【问题标题】：Ionic CSS classes assignment离子 CSS 类分配
【发布时间】：2017-12-26 01:09:56
【问题描述】：

我正在为我的应用设计样式。熟悉基本的主题组件、SASS 等……但有一点很突出并且没有意义，那就是为什么当我在正在运行的应用程序中预览源代码时，会添加多少额外的 CSS 类。我是我的情况，我只是想改变菜单标题背景。在我的 app.html 文件中；

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

翻译成;

    <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>

我看到似乎有一种“ion-element”转换为“element element-md”的模式。但是对于像 'ion-toolbar' 这样的元素会有点奇怪，因为它会添加一个 div

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

我想了解这个翻译过程对我来说是如何工作的。我想创建一些整洁的 CSS，因为它看起来有点笨拙！

【问题讨论】：

标签： css angular typescript ionic-framework sass

【解决方案1】：

ion-header 是一个角度指令（ion-toolbar 也是如此）。指令可以具有关联的 HTML 模板和 javascript。额外的类由属于每个指令的 javascript 添加。下面的代码演示了一个角度指令，其中一个类被添加到原始元素中。如果您检查结果，您还可以看到添加了一个额外的 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>

【讨论】：

啊哈！我更熟悉 Angular 的基础知识，所以现在这一切都很有意义，很好的答案和代码示例，谢谢。

【解决方案2】：

如果您查看 Header Ionic API Docs，对于 <ion-header>，您会看到有 3 个平台的 Sass 变量 - 冒号右侧的缩写用于针对特定平台的样式规则：

iOS : ios
Material Design（在 Chrome 等浏览器中默认设置）：md
Windows 平台：wp

平台特定样式确认here

当您执行ionic serve --lab 时，您可以选择平台并体验默认文件渲染。

如果您想针对特定平台定位 CSS，那么命名法是：
[<elementname>-<platform-abbreviation>]

这里有一个 more complete list of SASS variables 用于不同的离子组件。
在您的项目中有一个 themes/variables.scss，您可以在其中使用这些值。您可以在此处定义自己的 SCSS 变量，例如 $my-padding:5px;，然后在您的自定义组件 CSS 中使用它，因此该常量声明一次，您就可以全局应用。所以 my-component.scss 有

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

工具栏源文件夹是here。

toolbar-header.ts 包含<ion-header> 的@Directive 选择器'ion-header' Typescipt 类名：Header

toolbar.ts 包含 <ion-toolbar> 的 @Directive 选择器“ion-toolbar” Typescript 类名称：Toolbar

平台有 scss 文件..

他们似乎在进口：

ionic.globals.scss

此外，您还可以在 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
        }
                }
   })

这应该会给你一个洞察力

【讨论】：