Ionic Popup anpassen

Question

Ich versuche, die Größe eines Pop-up zu ändern. Aber ich habe keinen Erfolg.

ich dieses Popup-Vorlage haben:

<ion-view> 
     <ion-content scroll="false" class=""> 
      test 
     </ion-content> 
    </ion-view> 

Und in meinem Controller:

$scope.openFilter = function() { 
    var popupFilter = $ionicPopup.prompt({ 
      templateUrl: 'templates/popup-template-filter.html', 
      scope: $scope 
    }) 

    $scope.close = function() { 
     popupFilter.close(); 
    } 
    } 

In meinem Sass, habe ich versucht, dies und es funktionierte:

.popup { 
    width: 100% !important; 
    height: 180px !important; 
    position: fixed !important; 
    bottom: 0 !important; 
} 

aber ich habe mehr als ein Popup in meinem Projekt, und ich würde gerne individuell modifizieren.

Und meine zweite Frage, wie kann ich das Popup schließen? Ich fand Beispiele aber keine Pop-up mit anpassbaren Vorlage

Thankss

Answer 1

In diesem Beitrag können Sie die CSS-Master Klasse deklarieren, um Ihre Pop-ups individuell zu ändern:

Ionic: how to use cssClass in $ionicPopup?

Sie müssen nur tun dies:

.my-custom-popup{ 
    .popup{ 
    //styling for popup width, width: 300px; 
    } 
    .popup-title{ 
    //styling for title 
    } 
} 

und dann diese:

var popupScore = $ionicPopup.alert({ 

    title:'Score', 
    template: 'Total XP points: 50', 
    cssClass: 'my-custom-popup', 
    buttons: [{ 
    text:'Return', 
    type: 'button-assertive' 
}]}} 

Hoffe es hilft!

pd. in der Dokumentation, zeigt es alle Attribute, die Sie zu Ihrem Popup einschließlich dieser hinzufügen, benutzerdefinierte CSS-Klasse:

https://ionicframework.com/docs/api/service/ $ ionicPopup/