9

我看到 Ionic 2 有一个响应式网格系统，但这似乎只是让您创建一个网格样式布局。

我正在寻找可以让我在平板电脑上以一种方式显示视图，而在手机上以另一种方式显示视图的东西。在这个特定的例子中，我有一个工作列表。如果它是平板电脑，我还想在列表右侧显示一张地图并将它们绘制出来。如何制作我理解的地图，但我如何分辨他们正在使用什么并显示正确的 UI？

4

2 回答 2

8

您可以使用以下platform信息来决定布局的显示方式：

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属性来决定是否初始化地图。

于 2016-07-12T08:47:28.407 回答
3

与@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可能更有利（我试图为其他读者保持这个通用性）。

于 2016-07-12T10:13:03.203 回答