Ionic：如何在 $ionicPopup 中使用 cssClass？

Question

所以我想修改 $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 文件并从那里修改宽度？

Answer 1

只需定义一个母类并以这种方式覆盖 .popup 默认离子类

   .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

• .popup-head

• .popup-title

• .popup-sub-title

• .popup-body

• .popup-buttons.row

• .popup-buttons .button