Open JerryMissTom opened 6 years ago
这一节我们来探索如何设置APP的整体风格。我们都知道Android和ios默认的组件是截然不同的两种风格,比如说TimePicker,Modal等等,假如产品经理要求在两个平台上的风格保持一致,那该怎么办呢?ionic提供了这样的选项,秘密就在app.module.ts这个文件中。 举个例子:
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,效果如下:
back
tabsHideOnSubPages: true
ionic serve
NormalLoadPage
我们现在换成Android风格,修改相应地方的代码如下:
app.module.ts ... IonicModule.forRoot(MyApp, { backButtonIcon:'md-arrow-back', backButtonText: '返回', tabsHideOnSubPages: true, mode: 'md' })
md全称是Material Design,是Android提出的风格设计语言。 效果如下:
md
Material Design
两幅图可以看出两者还是有区别的,比如说返回按钮和文字的颜色不同,Title的位置不同,android的偏左,ios的居中。当然还有更多的设置项,参见Config,大家可以自己去探索,现在来尝试将我们APP变身吧。
大多情况下,我们会根据设计稿实现自己的风格组件,而不是用ionic提供的。
Note:本项目使用的风格设置如下:
... IonicModule.forRoot(MyApp, { backButtonIcon:'ios-arrow-back', backButtonText: '', mode: 'ios' })
这一节我们来探索如何设置APP的整体风格。我们都知道
Android
和ios
默认的组件是截然不同的两种风格,比如说TimePicker
,Modal
等等,假如产品经理要求在两个平台上的风格保持一致,那该怎么办呢?ionic
提供了这样的选项,秘密就在app.module.ts
这个文件中。 举个例子:在上面的代码中,我们设置我们的App风格是
ios
风格,返回键的文字是back
,返回的箭头风格是ios
的。假如我们项目使用的是Tabs这个模板,一定要加上tabsHideOnSubPages: true
这个设置,他的意思是从含有Tab的界面跳转到其他界面,tab会自动隐藏。 通过ionic serve
命令运行程序,首页点击进入NormalLoadPage
,效果如下:我们现在换成Android风格,修改相应地方的代码如下:
md
全称是Material Design
,是Android
提出的风格设计语言。 效果如下:两幅图可以看出两者还是有区别的,比如说返回按钮和文字的颜色不同,Title的位置不同,android的偏左,ios的居中。当然还有更多的设置项,参见Config,大家可以自己去探索,现在来尝试将我们APP变身吧。
大多情况下,我们会根据设计稿实现自己的风格组件,而不是用ionic提供的。
Note:本项目使用的风格设置如下: