离子4段模式=“md”检查不起作用

Question

我目前停留在离子4段上以使mode =“md”正常工作。我在4.1.2版本。这是代码：

<ion-toolbar text-capitalize>
    <ion-segment mode="md">
      <ion-segment-button value="seg1" text-capitalize checked>
        segment1
      </ion-segment-button>
      <ion-segment-button value="seg2" text-capitalize>
        segment2
      </ion-segment-button>
      <ion-segment-button value="seg3" text-capitalize>
        segment3
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

有谁知道它为什么不起作用？当我使用Chrome iOS响应模式访问网站时，我会看到iOS-Segment，而不是md-segment。

Answer 1

您可以尝试将模式md添加到工具栏吗？

<ion-toolbar mode="md" text-capitalize>
    <ion-segment mode="md">
      <ion-segment-button value="seg1" text-capitalize checked>
        segment1
      </ion-segment-button>
      <ion-segment-button value="seg2" text-capitalize>
        segment2
      </ion-segment-button>
      <ion-segment-button value="seg3" text-capitalize>
        segment3
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

Answer 2

您必须将模式更改为类，如下面更新的代码

<ion-toolbar class="md" text-capitalize>
    <ion-segment class="md">
      <ion-segment-button value="seg1" text-capitalize checked>
        segment1
      </ion-segment-button>
      <ion-segment-button value="seg2" text-capitalize>
        segment2
      </ion-segment-button>
      <ion-segment-button value="seg3" text-capitalize>
        segment3
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>

在全球范围内，您可以使用以下代码

import { IonicModule } from '@ionic/angular';
@NgModule({
  ...
  imports: [
    BrowserModule,
    IonicModule.forRoot({
      rippleEffect: false,
      mode: 'md'
    }),
    AppRoutingModule
  ],
  ...
})