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>

效果图

李胜松博客

下一讲将讲解在ionic3中如何封装通用组建。





lss博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论