创建于 2016-10-12 更新于 2016-10-13 3473次浏览

Ionic已经包含了很多基于平台的自定义，但是有时候，你需要你的项目更具有自定义。你有一些不同的方式，可用平台来样式一个应用。学会如何实现平代类，使用JS样式化的应用，或者在下面的文档中使用动态模板。

平台类

Ionic自动根据你用来浏览项目的设备，向你的项目的<body>添加类。这意味着如果你在一个iOS设备上浏览你的应用，<body>将会应用到platform-ios类。可在下面找到一些关于不同的类的信息。

平台设备类

ionic.Platform被用来取回设备信息，向项目的<body>应用类。Ionic SDK用了这些类，给这些项目一个平台专有的外观和感觉，你也可以用它来覆盖样式。

平台	类	描述
浏览器	`platform-browser`	如果你正在运行`ionic serve`，无论应用是否运行在桌面浏览器上，都会应用它。
Cordova	`platform-cordova`	无论应用是否正在设备上运行，因为设备使用了Cordova来显示应用。
Webview	`platform-webview`	无论应用是否运行在一个设备上的WebView内部，在一个原生应用内。
iOS	`platform-ios`	这个设备是iOS，因此，会给出iOS的“外观和感觉”对待。
iPad	`platform-ipad`	iOS设备是iPad，应用这个类，外加上`platform-ios`类。
Android	`platform-android`	这个设备是Android；因此，会给出Android的“外观和感觉”对待。
Windows Phone	`platform-windowsphone`	这个设备是Windows Phone；因此，会给出Windows Phone的“外观和感觉”对待。

平台操作系统版本类

Ionic还会基于操作系统版本来添加类。这可以用来针对特定的操作系统版本，自定义你的项目。所添加的类名是主要版本号、主版本号加次级版本号。

这个类根据观察操作系统版本的用户代理来创建。通过用_替换掉主要的和次要的版本数字之间的.分隔符来创建主要的+次要的类。所以，如果你在一个运行iOS 8.4的设备上运行你的项目，它会添加platform-ios8 and platform-ios8_4。下面是一些示例，但是并不仅限于此。

平台操作系统版本	类	描述
iOS 8	`platform-ios8`	该设备上的操作系统是运行iOS 8
iOS 8.4	`platform-ios8_4`	该设备上的操作系统是运行iOS 8.4除此之外还应用了`platform-ios8`类
Android 4	`platform-android4`	该设备上的操作系统是运行Android 4
Android 4.4	`platform-android4_4`	该设备上的操作系统是运行Android 4.4。除此之外，还应用了`platform-android4`类

使用平台类以覆盖样式

你可以使用任何一个上面的类，以覆盖Ionic样式。举个例子，如果你想覆盖率掉Android上的头标题的样式，让它变成大写的，你可以使用以下的代码：

.platform-android .bar-header {
text-transform: uppercase;  
}

这样会让Android上的头标题变成大写字母，但是其它设备上的头标题依然是小写的。

你甚至可以进一步基于平台定义侧边菜单样式。一切皆有可能！

使用AngularJS样式化

在你的JavaScript控件中可以使用ionic.Platform工具，来对你的应用设置平台。针对下面的示例，我们假定你有一个控件，称为AppCtrl封装在你的应用中。

设置平台

在你的AppCtrl控件中，使用ionic.Platform取得并设置平台：

.controller('AppCtrl', function($scope) {
  $scope.platform = ionic.Platform.platform();
})

使用平台以动态样式化元素

然后你可以使用这种平台以改变显示哪些元素、特定的元素上添加哪些类。举个例子，如果你正在使用制表符结构，而且你想要在Android上改变这种制表符的外观，但是对于别的设备保持原来的外观和感觉，你可以使用Android的ng-class，以基于平台动态添加类。在<ion-tabs>指令后面添加下面的内容，将针对Android平台添加tabs-positive 类，对除了Android之外别的一切设备添加 tabs-icon-top类：


<ion-tabs class="tabs-stable" ng-class="{'tabs-positive': platform == 'android', 'tabs-icon-top': platform != 'android'}">
  <!-- ion-tab directives go here -->
</ion-tabs>

你也可以使用Angular的ng-attr来动态地基于平台定义属性。举个例子，你可能想让制符位中的图标显示在所有的设备上，但是Android除外。你可以利用ng-attr-icon特性，动态地添加图标。要想针对除了Android之外的所有的设备，在“Home”制表位上定义一个图标，请使用下面的代码：


<!-- if the platform is android don't add an icon, all other devices get an icon -->
<ion-tab title="Home" ng-attr-icon="{{ platform != 'android' ? 'ion-home' : undefined}}" href="#/tab/home">

动态载入模板

有时候，基于平台显示或改变元素是不够的。有时候，当你需要对你的项目使用两个不同的结构，而且你不想在HTML中放置逻辑。那样的话，你可以使用ionic.Platform来决定在一个给定状态下载入哪个模板。举个例子，下面的代码，如果平台是Android，将载入templates/home-android.html文件，而对于其它所有平台，则载入templates/home.html。

.state('tab', {
  url: "/tab",
  abstract: true,
  controller: 'AppCtrl',
  templateUrl: function() {
    if (ionic.Platform.isAndroid()) {
        return  "templates/home-android.html";
    }
    return "templates/home.html";
  }
})

合并目录

该merges目录不再被默认添加到项目了，但是它依然是一个用来自定义你的应用的强大的工具。你可以在你的项目的顶层创建这个目录，并同着www和platforms目录。根据Cordova docs：

顶层的merges目录提供了一个地方，用来指定部署在特定平台上的小部件。merges内部的每个平台特有的子目录镜像了www 源文件树的目录结构，允许你覆盖或添加需要的文件。

举个例子，如果你想有一个平台专有的index.html文件，你可以创建下面的目录结构：

merges/
    ios/
        index.html
    android/
        index.html

如果你想有平台特有的样式或javascript，你也可以覆盖那些：

merges/
    ios/
        index.html
        css/
            platform.css
        js/
            app.js
    android/
        index.html
        css/
            platform.css
        js/
            app.js

当你运行应用时，Cordova将把平台特有的文件复制到platforms目录内的www目录。注意，那样的话你将不能看到浏览器中的这些不同的区别，只有当你在一种设备或仿真器上运行应用时。