$ ionicActionSheet, отображающий неправильный формат

Question

После обновления ионного каркаса до последнего кандидата на выпуск $ionicActionSheet начал плохо себя вести. Он показывает правильный формат с цветами и т. Д., Когда отображается в браузере Chrome, используя ionic serve, но когда я устанавливаю приложение на устройство Android, он отображает простой белый фон для $ionicActionSheet.

Вот два образца

Каждый имеет любой ключ, пожалуйста?

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 включает элементы дизайна материалов в андроид.

ActionSheets android ugly styling need help

Answer 3

Причина заключается в том, что Ионные применяет ".platform-андроида" CSS класс префиксов классы, которые вы упомянули (строки 3813-3842 в /css/ionic.css). Вы можете попробовать это только комментируя эти строки.

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