ionic3 配置组件的模式

 

参考文档：https://segmentfault.com/a/1190000008626945

 

每个平台都有对应的模式：

• md (Android)

• ios (iOS)

• wp (Windows Phone)

• md (Core - used for any platform other than the above)

我们也可以通过 Ionic 的 Config API 方便地配置 mode 下可配置字段的值，具体如下：

imports: [
  IonicModule.forRoot(MyApp, {
      backButtonText: "",
      backButtonIcon: "md-arrow-back",
      iconMode: "md",
     modalEnter: "modal-md-slide-in",
      modalLeave: "modal-md-slide-out",
      pageTransition: "md"
  });
]

以上的配置信息，用于设置在 iOS 平台下，App 的风格采用 Android material 设计。

我们也可以单独针对特定的平台，进行配置：

imports: [
    IonicModule.forRoot(MyApp, {
    platforms: {
      android: {
            backButtonText: "",
            backButtonIcon: "md-arrow-back",
            iconMode: "md",
            modalEnter: "modal-md-slide-in",
            modalLeave: "modal-md-slide-out",
            pageTransition: "md",
      },
      ios : {
            backButtonText: "Previous",
            backButtonIcon: "ios-arrow-back",
            iconMode: "ios",
            modalEnter: "modal-ios-slide-in",
            modalLeave: "modal-ios-slide-out",
            pageTransition: "ios",
     }
}];

此外，通过 Config API 提供的方法，我们可以在 TypeScript classes 中，方便的设置特定平台下的配置信息，具体如下：

config.set('ios', 'textColor', '#AE1245');

该方法接受三个参数：

• platform (optional - 'ios' or 'android', if omitted this will apply to all platforms)

• key (optional - The name of the key used to store our value I.e. 'textColor')

• value (optional - The value for the key I.e. '#AE1245')

通过 Config API 提供的 get 方法获取配置的值:

config.get('textColor');

我们也能够在组件层级，方便地配置组件，如通过 ion-tabs 的输入属性 tbasPlacement 设置 ion-tabs 组件的显示位置：

<ion-tabs tabsPlacement="bottom">
    <ion-tab tabTitle="Dash" tabIcon="pulse" [root]="tabRoot"></ion-tab>
</ion-tabs>

配置指定平台的样式

Ionic 使用 mode 来定义组件的外观。每个平台都有默认的 mode , 任何 mode 下的样式信息，都能被我们覆写。我们可以在 ion-app 中指定mode的值，具体如下：

<ion-app class="md">

覆写 md 模式下的样式

.md button {
  text-transform: capitalize;
}

覆写 md 下 Sass 变量的值

$button-md-border-radius: 8px;

// Ionic Sass
// ---------------------------------
@import "ionic";

动态的设置组件的属性

<ion-list [attr.no-lines]="isMD ? '' : null"