$ionicActionSheet 显示错误的格式

Question

将 ionic 框架升级到最新候选版本后，$ionicActionSheet 开始出现异常。当使用 ionic serve 在 Chrome 浏览器中显示时，它显示正确的格式和颜色等，但是当我在 Android 设备上安装应用程序时，它显示 $ionicActionSheet.[= 的纯白色背景15=]

这里有两个样本

有人知道吗？

Answer 1

我检查了页面并意识到我可以覆盖 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 2

格式的差异是设计使然。 Ionic 正在将 material 设计元素融入 android。

ActionSheets android ugly styling need help

Answer 3

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

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; }

有关更多信息，请参阅以下内容 link

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

$ionicActionSheet 显示错误的格式

$ionicActionSheet displaying wrong format

angularjs

angular-ui

ionic-framework

ionic

ngcordova