再次觀察UI設計效果圖，里面用的比較多的是這種樣式的選項卡：
image.png
用ionic3來實現就是采用segment組件。其中ios和android的樣式分別如下兩圖：
ios的segment
android的segment
可見，android的segment樣式比較接近，所以我們選用android的樣式（md，Google最先提出的，成為android官方樣式規(guī)范），把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。因為前面章節(jié)，我們在app.module.ts中做了全局配置mode="ios"，所以組件默認都會使用ios樣式，所以這里指定為md。
然后看看效果：
image.png
可以發(fā)現每項下面的線太長了：
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>
運行看看效果：
反色背景效果
可以看到，界面美化基本就是原有組件和樣式調整的過程，然而可以看到，在調整原有組件過程中，增加了頁面的代碼量，不利于閱讀，所以我們應該把它封裝成自定義組件，以便于復用，這是后話，后面章節(jié)再說。
