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"