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

Question

Ionic框架根据plataform运行应用程序，Android或iOS来定制其功能的外观，但我知道它还具有Ionic独有的第三种外观。

我的问题是，有没有办法指定如何和特定功能应该是什么样子？就像我希望Popovers看起来像Android风格和Action Sheets看起来iOS风格一样，都在同一个应用程序中，无论应用程序是在哪个平台上构建的？

必须有一种方法，否则就不会有事物的离子风格，例如：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类。您可以根据视图手动更改类。但是，它应用于身体，因此整个当前视图将不得不采用相同的ios或android样式。更好的是，您可以编写CSS来覆盖现有的样式，使其成为您认为合适的（并且Ionic鼓励这样做）。如果修改Sass变量并使用Sass构建功能重建Ionic CSS，也可以控制一些事情。

有选择地使用组件

您可以检测控制器中的平台，以确定是否应在Android的操作表或ios的操作表上使用popover。 http://ionicframework.com/docs/api/utility/ionic.Platform/在您的控制器中首先检查平台，然后触发相应的组件将是一个合理的条件。

这涵盖了我遇到的主要方式。您当然可以使用自己的设计来定位自己的CSS以覆盖默认值，从而忽略平台设计的连续性功能。如果您需要一些示例和更多详细信息，请参阅我的书Ionic in Action。