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    </div>    <div *ngSwitchCase="'pie'">        梨显示    </div></div>

效果：

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

样式

Sass變量

iOS 材料設計 Windows平台

屬性默認描述$segment-button-ios-background-colortransparent

分段按鈕的背景

$segment-button-ios-background-color-activated$toolbar-ios-active-color

激活的段按鈕的背景

$segment-button-ios-text-colorcolor-contrast($colors-ios, $segment-button-ios-background-color-activated)

段按鈕的文本顏色

$segment-button-ios-transition-activated100ms all linear

激活的段按鈕的轉換

$segment-button-ios-transition-hover100ms all linear

盤旋按鈕的切換

$segment-button-ios-transition-active100ms all linear

按按鈕切換分段按鈕

$segment-button-ios-opacity-hover.1

懸停的細分按鈕的不透明度

$segment-button-ios-opacity-active.16

按下分段按鈕的不透明度

$segment-button-ios-opacity-activated1

激活的段按鈕的不透明度

$segment-button-ios-opacity-disabled.3

禁用段的不透明度按鈕

$segment-button-ios-border-width1px

段按鈕的邊框寬度

$segment-button-ios-height3.2rem

段按鈕的高度

$segment-button-ios-line-height3rem

分段按鈕的線高度

$segment-button-ios-font-size1.3rem

段按鈕的字體大小

$segment-button-ios-border-radius4px

分段按鈕的邊框半徑

$segment-button-ios-icon-size2.6rem

細分按鈕中圖標的大小

$segment-button-ios-icon-line-height2.8rem

段按鈕中圖標的線高度

$segment-button-ios-toolbar-button-max-width100px

工具欄中段按鈕的最大寬度

$segment-button-ios-toolbar-button-height2.6rem

工具欄中的段按鈕的高度

$segment-button-ios-toolbar-line-height2.5rem

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

$segment-button-ios-toolbar-font-size1.2rem

工具欄中的段按鈕的字體大小

$segment-button-ios-toolbar-icon-size2.2rem

工具欄中“段”按鈕中圖標的大小

$segment-button-ios-toolbar-icon-line-height2.4rem

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