平台样式
http://ionicframework.com/docs/v2/theming/platform-specific-styles/
平台特定样式
Ionic使用模式来定制组件的外观。每个平台都有默认模式，也可以被覆写。例如，一个App在Android平台上回应用md（Material Design）模式。
<ion-app class="md">
下面的表格显示了每个平台添加的默认mode：
| Platform | Mode | Details |
|---|---|---|
ios |
ios |
iPhone，iPad，iPod将使用iOS样式 |
android |
md |
Android设备将使用Material Design样式 |
windows |
wp |
任何Windows设备包括Cordova霍electron将使用Windows样式 |
core |
md |
任何不符合上面平台的将使用Material Design样式 |
需要注意的是platform（平台）和mode（模式）不是一个东西。平台可以在应用的配置中被设置为任何模式。查看下面的章节中每个模式的默认设置。
默认模式配置
每个模式都有默认的配置。设置属性可以为每个平台更改也可以为所有平台更改。下面的表格显示每个配置属性的默认值。更多内容请查看API文档，了解如何覆写这些值。
| Config Property | Default ios Value |
Default md Value |
Default wp Value |
|---|---|---|---|
activator |
"highlight" |
"ripple" |
"highlight" |
actionSheetEnter |
"action-sheet-slide-in" |
"action-sheet-md-slide-in" |
"action-sheet-wp-slide-in" |
actionSheetLeave |
"action-sheet-slide-out" |
"action-sheet-md-slide-out" |
"action-sheet-wp-slide-out" |
alertEnter |
"alert-pop-in" |
"alert-md-pop-in" |
"alert-wp-pop-in" |
alertLeave |
"alert-pop-out" |
"alert-md-pop-out" |
"alert-wp-pop-out" |
backButtonText |
"Back" |
"" |
"" |
backButtonIcon |
"ios-arrow-back" |
"md-arrow-back" |
"ios-arrow-back" |
iconMode |
"ios" |
"md" |
"ios" |
loadingEnter |
"loading-pop-in" |
"loading-md-pop-in" |
"loading-wp-pop-in" |
loadingLeave |
"loading-pop-out" |
"loading-md-pop-out" |
"loading-wp-pop-out" |
menuType |
"reveal" |
"overlay" |
"overlay" |
modalEnter |
"modal-slide-in" |
"modal-md-slide-in" |
"modal-md-slide-in" |
modalLeave |
"modal-slide-out" |
"modal-md-slide-out" |
"modal-md-slide-out" |
pageTransition |
"ios-transition" |
"md-transition" |
"wp-transition" |
pageTransitionDelay |
16 |
96 |
96 |
pickerEnter |
"picker-slide-in" |
"picker-slide-in" |
"picker-slide-in" |
pickerLeave |
"picker-slide-out" |
"picker-slide-out" |
"picker-slide-out" |
popoverEnter |
"popover-pop-in" |
"popover-md-pop-in" |
"popover-md-pop-in" |
popoverLeave |
"popover-pop-out" |
"popover-md-pop-out" |
"popover-md-pop-out" |
spinner |
"ios" |
"crescent" |
"circles" |
tabsHighlight |
false |
false |
false |
tabsLayout |
"icon-top" |
"icon-top" |
"icon-top" |
tabsPlacement |
"bottom" |
"bottom" |
"top" |
tabsHideOnSubPages |
false |
false |
true |
toastEnter |
"toast-slide-in" |
"toast-md-slide-in" |
"toast-wp-slide-in" |
toastLeave |
"toast-slide-out" |
"toast-md-slide-out" |
"toast-wp-slide-out" |
覆写模式样式
每个Ionic的组件都有三种样式。例如，Tabs组件有一个core样式被所有的模式共享，一个Material样式表包含md模式的样式，一个iOS样式表包含ios模式。不是所有的组件在不同的模式下样子都不同，有些只有一个core样式。
你可以使用class来覆写组件的特定属性。例如，如果你想覆写所有Material Design（md）模式的按钮，将其设置为首字母大写：
.md button {
text-transform: capitalize;
}
这些模式的Sass文件有不同的变量可以用来覆写样式。对上面这个例子来说，我们可以通过更改$button-md-border-radius变量的值来改变md模式按钮的border-radius属性。你可以在你自己的自定义Sass文件里改，也可以在默认的主Sass文件里改，但必须在Ionic被引入之前：
$button-md-border-radius: 8px;
// Ionic Sass
// ---------------------------------
@import "ionic";
动态设置属性
也可以动态设置属性，你可以在某种特定的情况下从组件添加或移除。使用下面的语法来动态设置属性：
<ion-list [attr.no-lines]="isMD ? '' : null">
如果isMD为true，这将为List组件设置no-lines属性。