$ ionicActionSheet zeigt das falsche Format an

Question

Nach der Aktualisierung des ionischen Frameworks auf den neuesten Release-Kandidaten hat $ionicActionSheet begonnen, sich schlecht zu benehmen. Es zeigt das korrekte Format mit Farben usw. an, wenn es im Chrome-Browser unter ionic serve angezeigt wird, aber wenn ich die App auf einem Android-Gerät installiere, wird ein einfacher weißer Hintergrund für $ionicActionSheet angezeigt.

Hier sind zwei Proben

Wer hat eine Ahnung, bitte?

Answer 1

Ich inspizierte die Seite und erkannte, dass ich die Klassen überschreiben kann, die ActionSheet verwendet. Hier sind verschiedene Klassen auf verschiedenen Ebenen der Verschachtelung.

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

Hoffe, dass jemand da draußen hilft.

Answer 2

Der Unterschied im Format ist von Entwurf. Ionic integriert Material Design-Elemente in Android.

ActionSheets android ugly styling need help

Answer 3

Der Grund dafür ist, dass Ionic eine ".platform-android" CSS-Klasse prefixing die Klassen, die Sie erwähnt (Zeilen 3813 bis 3842 in /css/ionic.css) gilt. Sie können es nur versuchen, diese Zeilen zu kommentieren.

Answer 4

Sie müssen unter Code in ionic.css Kommentar

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

zu mehr Information mit

untenstehenden Link durch

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