ionicPopup中使用cssClass

ionicPopup中使用cssClass

本文介绍了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文件并修改其宽度?

解决方案

类和以这种方式覆盖.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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

    1403页,肝出来的..

09-06 20:51