$ ionicActionSheet hiển thị định dạng sai

Question

Sau khi nâng cấp khung ionic lên ứng cử viên phát hành mới nhất, $ionicActionSheet đã bắt đầu hoạt động sai. Nó hiển thị định dạng đúng với màu sắc vv khi được hiển thị trong trình duyệt Chrome sử dụng ionic serve nhưng khi tôi cài đặt Ứng dụng trên thiết bị Android, nó sẽ hiển thị nền trắng trơn cho $ionicActionSheet.

Dưới đây là hai mẫu

Bất cứ ai có bất kỳ đầu mối xin vui lòng?

Answer 1

Tôi đã kiểm tra trang và nhận ra rằng tôi có thể ghi đè lên các lớp mà ActionSheet đang sử dụng. Dưới đây là các lớp khác nhau ở các cấp độ lồng nhau khác nhau.

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

Hy vọng sẽ giúp ai đó ở ngoài đó.

Answer 2

Sự khác biệt trong định dạng là theo thiết kế. Ionic kết hợp các yếu tố thiết kế material design vào android.

ActionSheets android ugly styling need help

Answer 3

Lý do là Ionic áp dụng một ".platform-android" css lớp tiền tố các lớp mà bạn đề cập (dòng 3813-3842 trong /css/ionic.css). Bạn có thể thử chỉ cần nhận xét những dòng này.

Answer 4

Bạn cần bình luận dưới đây mã trong 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; } 

để biết thêm Thông tin đi qua với bên dưới liên kết

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