再次观察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：
-
<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>
- 在
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 ********/
- 最后把原
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>
运行看看效果：
反色背景效果
可以看到，界面美化基本就是原有组件和样式调整的过程，然而可以看到，在调整原有组件过程中，增加了页面的代码量，不利于阅读，所以我们应该把它封装成自定义组件，以便于复用，这是后话，后面章节再说。
