【Appetite】ionic3实录(四)微调Segment,并引出自定义组件概念

再次观察UI设计效果图,里面用的比较多的是这种样式的选项卡:

image.png

用ionic3来实现就是采用segment组件。其中ios和android的样式分别如下两图:

ios的segment

android的segment

可见,android的segment样式比较接近,所以我们选用android的样式(md,Google最先提出的,成为android官方样式规范),把contact.html<ion-header>标签部分换成下面内容:

<ion-header no-border>
  <ion-toolbar>
    <ion-segment mode="md">
      <ion-segment-button>
        EXPLAIN
      </ion-segment-button>
      <ion-segment-button>
        GROUP CHAT
      </ion-segment-button>
      <ion-segment-button>
        CONTACTS
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

注:关键代码是这句mode="md",它指定了该组件的模式为md。因为前面章节,我们在app.module.ts中做了全局配置mode="ios",所以组件默认都会使用ios样式,所以这里指定为md。

然后看看效果:

image.png

可以发现每项下面的线太长了:

image.png

在Chrome调试可以看到,这其实是属于ion-segment-button的下border,所以长度无法修改的,于是我们换另一种方式——添加一个短border的div:

  1. <ion-segment-button>里面添加一个class="bolder-sm"的div
<ion-header no-border>
  <ion-toolbar>
    <ion-segment mode="md">
      <ion-segment-button>
        EXPLAIN
        <div class="bolder-sm"></div>
      </ion-segment-button>
      <ion-segment-button>
        GROUP CHAT
        <div class="bolder-sm"></div>
      </ion-segment-button>
      <ion-segment-button>
        CONTACTS
        <div class="bolder-sm"></div>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>
  1. app.scss文件添加下面样式:
/***** segment颜色定制 start *********/
.segment-md .segment-button {
    color: color($colors, gray) !important;
}
.segment-md .segment-button.segment-activated {
    color: color($colors, primary) !important;
    font-weight: bold;
    .bolder-sm{
        border: 5px solid color($colors, primary);
        width: 20px;
        margin: 0 auto;
    }
}
/***** segment颜色定制 end ********/
  1. 最后把原ion-segment-button的border去掉,在variables.scss添加如下内容:
$segment-button-md-border-bottom-width: 0px;
$segment-button-md-font-size: 1.4rem;

最后运行查看效果:

调整后的效果

而对于这种有反转色的情况:

image.png

我们只需在全局样式文件app.scss中的.primary-bg里添加类似代码即可:

/*********** 背景色 start **********/
.primary-bg {
    .toolbar {
        .toolbar-background {
            background-color: color($colors, primary);
        }
        .toolbar-title{
            color: color($colors, light);
        }
    }
    .segment-md .segment-button {
        color: color($colors, light-gray) !important;
    }
    .segment-md .segment-button.segment-activated{
        color: color($colors, light) !important;
        font-weight: bold;
        .bolder-sm{
            border: 5px solid color($colors, light);
            width: 20px;
            margin: 0 auto;
        }
    }
}
/*********** 背景色 end **********/

最后我们可以在about.html里添加相应组件:

<ion-header class="primary-bg" no-border>
  <ion-navbar>
    <ion-buttons start>
      <button ion-button icon-only color="light">
         <ion-icon name="md-add"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>
      RECIPE ARCHIVE
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only color="light">
          <ion-icon name="md-menu"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
  <ion-toolbar>
    <ion-segment mode="md">
      <ion-segment-button value="one">
        DESSERT
        <div class="bolder-sm"></div>
      </ion-segment-button>
      <ion-segment-button value="two">
        DRINKS
        <div class="bolder-sm"></div>
      </ion-segment-button>
      <ion-segment-button value="three">
        EINKORN
        <div class="bolder-sm"></div>
      </ion-segment-button>
      <ion-segment-button value="four">
        LIFESTYLE
        <div class="bolder-sm"></div>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

运行看看效果:

反色背景效果

可以看到,界面美化基本就是原有组件和样式调整的过程,然而可以看到,在调整原有组件过程中,增加了页面的代码量,不利于阅读,所以我们应该把它封装成自定义组件,以便于复用,这是后话,后面章节再说。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员同行者

mongodb4.0.2 复制集主从部署

复制集(Replica Sets),是一个基于主/从复制机制的复制功能,进行同一数据的异步同步,从而使多台机器拥有同一数据的都多个副本,由于有自动故障转移和恢复...

3995
来自专栏从零开始学自动化测试

appium+python自动化98-非select弹出选择框定位解决

遇到问题:document.getElementsByClassName(…)[0] is undefined 选择框如果是select标签的,可以直接用sel...

1182
来自专栏小俊博客

通过JS显示网站运行时间

1514
来自专栏郭耀华‘s Blog

android 小知识点

1、 最近翻看以前的项目时候,想更改下布局文件,谁知道就改了个参数就提示如下的报错,百思不得其解,原来是这样解决的。小记一下。 更改layout的xml之后...

2836
来自专栏守望轩

Visual Studio 2008 每日提示(六)

#051、循环使用剪贴薄里粘贴的不同内容 原文地址:http://blogs.msdn.com/saraford/archive/2007/10/01/did...

34410
来自专栏九彩拼盘的叨叨叨

Firefox 使用小技巧

Sage: 体验性上,还是没有一些专业做rss 阅读器的好,比如feedly 以及 鲜果

762
来自专栏DeveWork

iOS 7 Web App的初级优化之道

本文所涉及的内容大体上是作为《移动Web 开发中的一些前端知识收集汇总》的扩展,但只限于iOS7 系统,建议在阅读本文之前先看看该文以及《将你的网站打造成一个i...

2037
来自专栏前端架构与工程

解决transition动画与display冲突的几种方法

如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击“Translat...

2036
来自专栏Ray学习笔记

Jump Start Bootstrap 第4章

JavaScript是网页上事实上的脚本语言。流行的网页功能,例如:漂亮的图片幻灯片、下拉菜单、弹出框等,都可以结合JavaScript和CSS实现。在这章,我...

1274
来自专栏守望轩

Visual Studio 2008 每日提示(十四)

#131、你为什么会把窗体设置成为浮动(模式) 原文链接:Why you would want to make a Tool Window Floating ...

3537

扫码关注云+社区

领取腾讯云代金券