主题 ios 段像 md 段

Question

我正在尝试将 ios 上的 Segment 组件设置为类似于我的一个 ionic2 项目中 Material Design 上 Segment 的默认样式。

有谁能帮忙给出理想的方法吗？

Answer 1

您只需像这样设置 mode 属性：

<ion-segment mode="md" [(ngModel)]="selectedTab">
    <ion-segment-button value="segment1">
        Segment 1
    </ion-segment-button>
    <ion-segment-button value="segment2">
        Segment
    </ion-segment-button>
</ion-segment>

如果该段在 ion-toolbar 内，您可以在那里设置模式也以便工具栏具有它在 Android 上的高度：

<ion-toolbar mode="md">
    <ion-segment mode="md" [(ngModel)]="selectedTab">
        <ion-segment-button value="segment1">
            Segment 1
        </ion-segment-button>
        <ion-segment-button value="segment2">
            Segment
        </ion-segment-button>
    </ion-segment>
</ion-toolbar>

更新

正如评论中提到的Zhang Bruce，使用Ionic 4时，您还必须为每个分段按钮添加mode="md" :

<ion-toolbar>
    <ion-segment mode="md" [(ngModel)]="selectedTab">
        <ion-segment-button mode="md" value="segment1">
            Segment 1
        </ion-segment-button>
        <ion-segment-button mode="md" value="segment2">
            Segment
        </ion-segment-button>
    </ion-segment>
</ion-toolbar>

主题 ios 段像 md 段

Theme ios Segment like md segment

angular

ionic-framework

ionic2

ionic3