使用Ionic 2可以更改手機和平板電腦的佈局嗎？

Question

我看到Ionic 2有一個響應式網格系統，但似乎只是讓您創建網格樣式佈局。

我正在尋找的東西，可以讓我在平板電腦上顯示一種方式，另一種方式在手機上顯示。在這個特定的例子中，我有一份工作清單。如果是平板電腦，我還想在列表右側顯示一張地圖並繪製出來。如何製作我理解的地圖，但如何告訴他們正在使用的地圖並顯示正確的用戶界面？

Answer 1

你可以決定的佈局將如何使用platform information顯示：

Platform Name Description 
android on a device running Android. 
cordova on a device running Cordova. 
core on a desktop device. 
ios on a device running iOS. 
ipad on an iPad device. 
iphone on an iPhone device. 
mobile on a mobile device. 
mobileweb in a browser on a mobile device. 
phablet on a phablet device. 
tablet on a tablet device. 
windows on a device running Windows. 

使用基礎platform信息，您可以設置顯示或如果通過只是一個tablet（或ipad）隱藏的東西簡單地做：

this.isTabletOrIpad = this.platform.is('tablet') || this.platform.is('ipad'); 

，然後使用*ngIf或者你在你的意見需要，或者使用isTabletOrIpad屬性來決定是否要初始化地圖Ø不是。

Answer 2

與@sebaferreras類似，您可以使用Platform Name中列出的名稱，但我會建議將它與showWhen屬性一起使用。

showWhen屬性需要一個字符串，該字符串表示平臺或 屏幕方向。當該平臺或屏幕方向處於活動狀態時，該屬性添加到的元素將僅顯示 。

這種方法封裝了Platform類的邏輯，這意味着你不需要在Page.ts文件中做任何事情，唯一需要擔心的代碼將在HTML中。

例

如果您希望某些代碼，只能是平板電腦屏幕

<div showWhen="tablet"> 
    All content inside here will be visible on tablet devices 
</div> 

硒的ShowWhen文檔的詳細信息可見。他們也提供HideWhen屬性。

注意

正如在評論下方

• 提到的showWhen方法將只是display: none;財產 申請，這意味着你的HTML仍然會呈現 不管類型的元素設備。
• 如果你採取*ngIf的方法，它將只會加載HTML內容 ，如果它符合規則。

性能明智*ngIf可能是你更好的選擇，但在其他情況下showWhen可能是更有利的（我想保持這種通用的其他讀者）。