ionic Ionic Frameworkionic开发

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

2016-10-19  本文已影响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

上一篇下一篇

猜你喜欢

热点阅读