javascript - 如何指定 Ionic 功能的外观风格？

Question

Ionic 框架根据运行应用程序的平台(Android 或 iOS)自定义其功能的外观，但我知道它还有 Ionic 独有的第三种外观。

我的问题是，有没有办法指定特定功能的外观？比如，如果我希望 Popovers 看起来像 Android 风格，而 Action Sheets 看起来像 iOS 风格，所有这些都在同一个应用程序中，无论应用程序是在哪个平台上构建的？

必须有一种方法，否则就不会有 Ionic 风格，就像这个例子:http://codepen.io/ionic/pen/GpCst

我已经尝试过像示例一样的setPlatform函数，但没有成功。

$scope.setPlatform = function(p) {
  document.body.classList.remove('platform-ios');
  document.body.classList.remove('platform-android');
  document.body.classList.add('platform-' + p);
  $scope.demo = p;
}

Answer 1

有几种方法可以做到这样的事情，但应该清楚的是，Ionic 对平台特定设计的开箱即用支持是有限的。当为一个组件选择 iOS 特定样式并为另一个组件选择 Android 样式时，您可能会遇到一些困难的情况。

某些组件具有配置选项。

看看http://ionicframework.com/docs/api/provider/ $ionicConfigProvider/，您将看到一些可以全局配置的组件，例如选项卡、导航栏、表单元素，也许将来还有其他组件。

您可以根据平台修改 CSS 目标

您已经看到主体根据设备应用了 platform-ios 或 platform-android 类。您可以根据 View 手动更改类。但是，它应用于 body，因此整个当前 View 必须采用相同的 ios 或 android 样式。更好的是，您可以编写 CSS 来覆盖现有样式，使其符合您的需要(Ionic 鼓励这样做)。如果您修改 Sass 变量并使用 Sass 构建功能重建 Ionic CSS，则还可以控制某些事情。

有选择地使用组件

您可以检测 Controller 中的平台，以确定是否应该在 Android 上使用弹出框或在 ios 上使用操作表。 http://ionicframework.com/docs/api/utility/ionic.Platform/首先检查平台，然后触发适当的组件，这将是 Controller 中的逻辑条件。

这涵盖了我遇到的主要方式。当然，您可以以自己的 CSS 为目标，用自己的设计覆盖默认值，从而忽略平台设计连续性功能。这些内容在我的书Ionic in Action中都有介绍。如果您想要一些示例和更多详细信息。