ionic3项目实战教程 - 第5讲 ionic3商城首页透明导航栏设计-阿里云开发者社区

开发者社区> 云计算> 正文

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

简介: 这一讲主要包含以下几个部分 1.配置APP主色调; 2.设置ion-content组建的fullscreen属性; 3.设计透明导航栏 配置APP主色调; 找到src/theme/variables.

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

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

效果图

img_6cb903516eae3a9e0f015591e724aca6.gif
5-1.gif

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

完!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

其他文章