ionic2中ion-segment用法

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>

效果：

参照文档：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	工具欄中的段按鈕中圖標的線高度