ionic3 配置组件的模式

 

参考文档：http://www.javashuo.com/article/p-uuunivca-eg.html

 

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

• 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"