手摸手帶你入門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'
    })
複製代碼