手摸手带你入门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'
    })
复制代码