这一讲主要包含以下几个部分
- 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>
效果图
下一讲将讲解在ionic3中如何封装通用组建。
完!