主题 ios Segment like md Segment答案

【问题标题】：Theme ios Segment like md segment主题 ios Segment like md Segment
【发布时间】：2023-03-31 18:53:02
【问题描述】：

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

任何人都可以帮助提供理想的方法吗？

【问题讨论】：

标签： angular ionic-framework ionic2 ionic3

【解决方案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 在 cmets 中提到的，在使用 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 样式我更改了 mode="ios"。
注意 ionic 4 你必须为每个段按钮添加 mode="md" ，否则它将不起作用。