web-dev-qa-db-ja.com

Ionic：$ ionicPopupでcssClassを使用する方法は？

したがって、$ ionicPopupのデフォルトの幅を変更したいので、以下のコードのように、ポップアップオブジェクトに「cssClass」を追加する必要があります。

  $scope.getScore = function(){
  var popupScore = $ionicPopup.alert({

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

この場合、どのように進めますか？ cssClassに値を指定する必要がありますか？ （つまり、cssClass = 'popupClass'）次に、CSSファイルに移動して、そこから幅を変更しますか？

javascriptcsshtmlionic-frameworkionic
8
Batzi

マザークラスを定義し、この方法で.popup default ionic classをオーバーライドするだけです。

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

cssClassにmy-custom-popupを渡します

 var popupScore = $ionicPopup.alert({

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

親クラスでオーバーライドまたはカスタマイズできるクラスのリストは次のとおりです

  • 。現れる

  • .popup-head

  • .popup-title

  • .popup-sub-title

  • .popup-body

  • .popup-buttons.row

  • .popup-buttons .button

21
Mudasser Ajaz