这一节我们来探索如何设置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'
})
复制代码