<div [ngClass]="{'th-slider-enable' : segmentSliderEnabel }">
<ion-segment mode="md" [(ngModel)]="selectedSegment">
<ion-segment-button value={{item.value}}
[ngClass]="{'th-segment-selected': item.value == selectedSegment } "
(click)="segmentClick(item.value)"
*ngFor="let item of segmentItems">
{{item.name}}
</ion-segment-button>
</ion-segment>
</div>
//css
//segment颜色
//默认颜色
.segment-md .segment-button {
color: $th-default-black;
}
//选中颜色
.th-segment-selected{
color: $th-theme-blue !important;
}
.segment-md .segment-button.activated, .segment-md .segment-button.segment-activated {
border-color: $th-theme-blue;
}
//可滑动的segment
//refer to https://github.com/ionic-team/ionic/issues/7202
.th-slider-enable {
ion-segment {
display: block;
white-space: nowrap;
font-size: 0;
overflow: auto;
&::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
ion-segment-button.segment-button {
display: inline-block;
min-width: 80px;
width: auto;
}
}
}