ionic3项目实战教程 – 第5讲 ionic3商城首页透明导航栏设计

这一讲主要包含以下几个部分

  • 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>

效果图


作者:IonicBlog
链接:http://www.jianshu.com/p/ce52debb68cb

发表评论

电子邮件地址不会被公开。 必填项已用*标注