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

并通过my-custom-popup在 cssClass

 var popupScore = $ionicPopup.alert({

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

以下是您可以在父类中覆盖或自定义的类列表

• .弹出

• .popup头

• .popup标题

• .popup子标题

• .popup体

• .popup-buttons.row

• .popup-buttons .button