segment是一组按钮，有时称为分段控件，允许用户与许多控件的紧凑组进行交互。 分段提供与标签相似的功能，选择一个将取消选择所有其他选项。 当您希望让用户在应用程序的不同页面之间来回移动时，应使用选项卡栏而不是分段控件。 您可以使用Angular的ngModel或FormBuilder API。

效果看图看代码：

<!-- Segment 在头部使用 -->
<ion-header>
    <ion-toolbar>
        <ion-segment [(ngModel)]="icons" color="secondary">
            <ion-segment-button value="camera">
                <ion-icon name="camera">带iocn</ion-icon>
            </ion-segment-button>
            <ion-segment-button value="bookmark">
                头部使用Segment
                <ion-icon name="bookmark"></ion-icon>
            </ion-segment-button>
        </ion-segment>
    </ion-toolbar>
</ion-header>

<!-- Segment 在内容里面使用 -->
<ion-segment [(ngModel)]="relationship" color="primary" (ionChange)="segmentChanged($event)">
    <ion-segment-button value="friends">
        Segment 在内容里面使用
    </ion-segment-button>
    <ion-segment-button value="enemies">
        可以绑定一个事件(ionChange)
    </ion-segment-button>
</ion-segment>

<!-- Segment 在表单里面使用 -->
<form [formGroup]="myForm">
    <ion-segment formControlName="mapStyle" color="danger">
        <ion-segment-button value="standard">
            Standard
        </ion-segment-button>
        <ion-segment-button value="hybrid">
            表单内使用
        </ion-segment-button>
        <ion-segment-button value="sat">
            Satellite
        </ion-segment-button>
    </ion-segment>
</form>

<!-- Segment 配合ngSwitch使用 -->
<ion-segment [(ngModel)]="change">
    <ion-segment-button value="apple">
        苹果
    </ion-segment-button>
    <ion-segment-button value="pie">
        梨
    </ion-segment-button>
</ion-segment>
<div [ngSwitch]="change">
    <div *ngSwitchCase="'apple'">
        苹果显示，如果要默认显示一个就把默认的那个设置一个初始值比如要默认显示苹果就把苹果的value值设置成change也就是说，在定义change变量的时候，需要把哪个设置为默认显示就把哪个的value值赋值给change作为初始值 public change="pie";
    </div>
    <div *ngSwitchCase="'pie'">
        梨显示
    </div>
</div>
效果： ionic2中ion-segment用法_不透明度ionic2中ion-segment用法_不透明度_02ionic2中ion-segment用法_不透明度_03

参照文档：https://ionicframework.com/docs/api/components/segment/Segment/

样式

Sass變量

iOS  材料設計  Windows平台
屬性 默認 描述
$segment-button-ios-background-color transparent

分段按鈕的背景
$segment-button-ios-background-color-activated $toolbar-ios-active-color

激活的段按鈕的背景
$segment-button-ios-text-color color-contrast($colors-ios, $segment-button-ios-background-color-activated)

段按鈕的文本顏色
$segment-button-ios-transition-activated 100ms all linear

激活的段按鈕的轉換
$segment-button-ios-transition-hover 100ms all linear

盤旋按鈕的切換
$segment-button-ios-transition-active 100ms all linear

按按鈕切換分段按鈕
$segment-button-ios-opacity-hover .1

懸停的細分按鈕的不透明度
$segment-button-ios-opacity-active .16

按下分段按鈕的不透明度
$segment-button-ios-opacity-activated 1

激活的段按鈕的不透明度
$segment-button-ios-opacity-disabled .3

禁用段的不透明度按鈕
$segment-button-ios-border-width 1px

段按鈕的邊框寬度
$segment-button-ios-height 3.2rem

段按鈕的高度
$segment-button-ios-line-height 3rem

分段按鈕的線高度
$segment-button-ios-font-size 1.3rem

段按鈕的字體大小
$segment-button-ios-border-radius 4px

分段按鈕的邊框半徑
$segment-button-ios-icon-size 2.6rem

細分按鈕中圖標的大小
$segment-button-ios-icon-line-height 2.8rem

段按鈕中圖標的線高度
$segment-button-ios-toolbar-button-max-width 100px

工具欄中段按鈕的最大寬度
$segment-button-ios-toolbar-button-height 2.6rem

工具欄中的段按鈕的高度
$segment-button-ios-toolbar-line-height 2.5rem

工具欄中的段按鈕的線高度
$segment-button-ios-toolbar-font-size 1.2rem

工具欄中的段按鈕的字體大小
$segment-button-ios-toolbar-icon-size 2.2rem

工具欄中“段”按鈕中圖標的大小
$segment-button-ios-toolbar-icon-line-height 2.4rem

工具欄中的段按鈕中圖標的線高度