手摸手带你入门ionic3(八)：主题风格

这一节咱们来探索如何设置APP的总体风格。咱们都知道Android和ios默认的组件是大相径庭的两种风格，好比说TimePicker，Modal等等，假如产品经理要求在两个平台上的风格保持一致，那该怎么办呢？ionic提供了这样的选项，秘密就在app.module.ts这个文件中。 举个例子：

app.module.ts

...
IonicModule.forRoot(MyApp, {
      backButtonIcon:'ios-arrow-back',
      backButtonText: 'back',
      tabsHideOnSubPages: true,
      mode: 'ios'
    })
...
复制代码

在上面的代码中，咱们设置咱们的App风格是ios风格，返回键的文字是back，返回的箭头风格是ios的。假如咱们项目使用的是Tabs这个模板，必定要加上tabsHideOnSubPages: true这个设置，他的意思是从含有Tab的界面跳转到其余界面，tab会自动隐藏。 经过ionic serve命令运行程序，首页点击进入NormalLoadPage，效果以下：

咱们如今换成Android风格，修改相应地方的代码以下：

app.module.ts
...
IonicModule.forRoot(MyApp, {
      backButtonIcon:'md-arrow-back',
      backButtonText: '返回',
      tabsHideOnSubPages: true,
      mode: 'md'
    })
复制代码

md全称是Material Design，是Android提出的风格设计语言。 效果以下：

两幅图能够看出二者仍是有区别的，好比说返回按钮和文字的颜色不一样，Title的位置不一样，android的偏左，ios的居中。固然还有更多的设置项，参见Config，你们能够本身去探索，如今来尝试将咱们APP变身吧。

大多状况下，咱们会根据设计稿实现本身的风格组件，而不是用ionic提供的。

Note：本项目使用的风格设置以下：

...
 IonicModule.forRoot(MyApp, {
      backButtonIcon:'ios-arrow-back',
      backButtonText: '',
      mode: 'ios'
    })
复制代码