Ionic：如何在$ ionicPopup中使用cssClass？ [英] Ionic: how to use cssClass in $ionicPopup?

问题描述

所以我想修改$ 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文件并修改其宽度？
解决方案
类和以这种方式覆盖.popup默认离子类
  .my-custom-popup {
 .popup {
 //为弹出框宽度设置样式，宽度：300px; 
} 
 .popup-title {
 //样式标题
} 
} 
  
并传递 my-custom-popup  $ c> cssClass  
  var popupScore = $ ionicPopup.alert（{
 
 title：'Score'，
 template：'总XP积分：50'，
 cssClass：'my-custom-popup'，
按钮：[{
 text： 'return'，
 type：'button-assertive'
}]}} 
  
以下是您可以在父类中覆盖或自定义的类的列表
 
 
 
 
 
 
 .popup 
 / li> 
 
 
 .popup-head 
 
 
 
 
 .popup-title 
 b 
 
 .popup-sub-title 
 
 
 
 
 .popup-body 
 
 
 
 
 .popup-buttons.row 
 
 
 
  
 
 
 .popup- b $ b
So I want to modify the default width in $ionicPopup and to do so I have to add 'cssClass' to my popup object just like the code below
  $scope.getScore = function(){
  var popupScore = $ionicPopup.alert({

  title:'Score',
  template: 'Total XP points: 50',
  cssClass: '',
  buttons: [{
    text:'Return',
    type: 'button-assertive'
  }]}}
How would you proceed in this case? Should I give cssClass a value? (i.e: cssClass = 'popupClass') and then go to my CSS file and modify the width from there?
解决方案
Just define a mother class and override .popup default ionic class inside this way
   .my-custom-popup{
      .popup{
        //styling for popup width, width: 300px;
      }
      .popup-title{
        //styling for title
      }
    }
and pass my-custom-popup in  cssClass
 var popupScore = $ionicPopup.alert({

  title:'Score',
  template: 'Total XP points: 50',
  cssClass: 'my-custom-popup',
  buttons: [{
    text:'Return',
    type: 'button-assertive'
  }]}}
Here is the list of classes which you can override or customize in your parent class 


.popup
.popup-head 
.popup-title 
.popup-sub-title 
.popup-body
.popup-buttons.row 
.popup-buttons .button


                        
这篇关于Ionic：如何在$ ionicPopup中使用cssClass？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！