$ ionicActionSheet显示错误的格式

Question

将离子框架升级到最新候选版本后，$ionicActionSheet已开始行为不端。当使用ionic serve在Chrome浏览器中显示时，它会显示正确的颜色等格式，但是当我在Android设备上安装应用时，它会显示$ionicActionSheet的纯白色背景。

以下是两个样本

任何人都有任何线索吗？

Answer 1

原因是 Ionic应用了一个“.platform-android”css类前缀你提到的类（/css/ionic.css中的第3813-384行）。您可以尝试评论这些行。

Answer 2

我检查了页面并意识到我可以覆盖ActionSheet正在使用的类。以下是不同嵌套级别的各种课程。

<div class="action-sheet-wrapper action-sheet-up">
  <div class="action-sheet" ng-class="{'action-sheet-has-icons': $actionSheetHasIcon}">
    <div class="action-sheet-group action-sheet-options">
      <!-- ngIf: titleText -->
      <div class="action-sheet-title ng-binding" ng-if="titleText" ng-bind-html="titleText">Select an Option</div>
      <!-- end ngIf: titleText -->
      <!-- ngRepeat: b in buttons -->
      <button class="button action-sheet-option ng-binding" ng-click="buttonClicked($index)" ng-repeat="b in buttons" ng-bind-html="b.text">Show Page Settings</button>
      <!-- end ngRepeat: b in buttons -->
      <button class="button action-sheet-option ng-binding" ng-click="buttonClicked($index)" ng-repeat="b in buttons" ng-bind-html="b.text">About us</button>
      <!-- end ngRepeat: b in buttons -->
      <button class="button action-sheet-option ng-binding" ng-click="buttonClicked($index)" ng-repeat="b in buttons" ng-bind-html="b.text">Version History</button>
      <!-- end ngRepeat: b in buttons -->
      <button class="button action-sheet-option ng-binding" ng-click="buttonClicked($index)" ng-repeat="b in buttons" ng-bind-html="b.text">Rate</button>
      <!-- end ngRepeat: b in buttons -->
      <button class="button action-sheet-option ng-binding" ng-click="buttonClicked($index)" ng-repeat="b in buttons" ng-bind-html="b.text">Search on Server</button>
      <!-- end ngRepeat: b in buttons -->
      <button class="button action-sheet-option ng-binding" ng-click="buttonClicked($index)" ng-repeat="b in buttons" ng-bind-html="b.text">Refresh Menu</button>
      <!-- end ngRepeat: b in buttons -->
      <button class="button action-sheet-option ng-binding" ng-click="buttonClicked($index)" ng-repeat="b in buttons" ng-bind-html="b.text">Quit</button>
      <!-- end ngRepeat: b in buttons -->
      <!-- ngIf: destructiveText -->
    </div>
    <!-- ngIf: cancelText -->
    <div class="action-sheet-group action-sheet-cancel" ng-if="cancelText">
      <button class="button ng-binding" ng-click="cancel()" ng-bind-html="cancelText">Cancel</button>
    </div>
    <!-- end ngIf: cancelText -->
  </div>
</div>

希望帮助那里的人。

Answer 3

格式的差异在于设计。 Ionic将材料设计元素融入到android中。

ActionSheets android ugly styling need help

Answer 4

您需要在ionic.css

中的代码下方发表评论

.platform-android .action-sheet-backdrop.active {
  background-color: rgba(0, 0, 0, 0.2); }

.platform-android .action-sheet {
  margin: 0; }

  .platform-android .action-sheet .action-sheet-title,
  .platform-android .action-sheet .button {
    text-align: left;
    border-color: transparent;
    font-size: 16px;
    color: inherit; }

  .platform-android .action-sheet .action-sheet-title {
    font-size: 14px;
    padding: 16px;
    color: #666; }
  .platform-android .action-sheet .button.active,
  .platform-android .action-sheet .button.activated {
    background: #e8e8e8; }

.platform-android .action-sheet-group {
  margin: 0;
  border-radius: 0;
  background-color: #fafafa; }

.platform-android .action-sheet-cancel {
  display: none; }

.platform-android .action-sheet-has-icons .button {
  padding-left: 56px; }

了解更多信息，请点击以下链接

https://forum.ionicframework.com/t/actionsheets-android-ugly-styling-need-help/18462