美文网首页ionic Ionic Frameworkionic开发
Ionic下如何修改popover的尺寸大小

Ionic下如何修改popover的尺寸大小

作者: 格吾刚哥 | 来源:发表于2016-10-19 21:37 被阅读133次

    使用popover默认的情况下,如果仅靠使用stype=height:100px 这样是无法进行控制的,而且在android设备下还会出现遮挡的情况。

    关于这个问题官方论坛上也有讨论:

    https://forum.ionicframework.com/t/popover-sizing/8251/20

    最终也有人给出了具体的方案:

    定义如下样式:

    ion-popover-view.fit {
      width: auto;
      height: auto;
      ion-content {
        position: relative;
      }
    }
    
    .platform-android ion-popover-view.fit {
      margin-top: 10px;
    }
    
    .platform-ios ion-popover-view.fit {
      .item:first-child {
        @include border-top-radius($popover-border-radius-ios);
      }
      .item:last-child {
        @include border-bottom-radius($popover-border-radius-ios);
      }
    }
    

    然后在使用popover的html代码添加fit的class属性即可。

    这里有一个ionic在不同平台下popover样式的demo,大家可以参考代码看一看

    http://codepen.io/vladius/pen/VLEOQo

    相关文章

      网友评论

        本文标题:Ionic下如何修改popover的尺寸大小

        本文链接:https://www.haomeiwen.com/subject/kxaxuttx.html