可以使用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可能更有利（我正试图为其他读者保留这种通用）。