這一講主要包含以下幾個部分

• 1.配置APP主色調；
• 2.設置ion-content組建的fullscreen屬性；
• 3.設計透明導航欄

配置APP主色調；

找到src/theme/variables.scss，修改$colors的primary顏色值：

variables.scss

$colors: (
  primary:    #f8285c,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

2.設置ion-content組建的fullscreen屬性；

home.html

  <ion-content fullscreen>
   ...
  </ion-content> 

* 3.設計透明導航欄

home.html

<ion-header>
  <ion-navbar style="opacity: 0.8" no-border-bottom color="primary">
    <ion-title>首頁</ion-title>
  </ion-navbar>
</ion-header>

效果圖

5-1.gif

下一講將講解在ionic3中如何封裝通用組建。

完！