使用Onsen Ui创建类似Android的Popover

Question

我目前正在使用Phonegap + Onsen UI创建一个Android应用。 现在，我的菜单中有一个类似Android的More Button（三个点），当有人单击它时，我想打开此典型的“ More-Button菜单”。 有与温泉UI在Android酥料饼的例子在这里 ，但是当你看看的组件文件 ，你不能阅读一些关于Android的酥料饼了。

我的问题是，当我从示例中获取弹出代码时，无法使用文档中的代码打开它：

  ons.createPopover('more-popover.html').then(function(popover) {
    $scope.popover = popover;
  });

更popover.html：

<div class="popover-mask"></div>
<div class="popover popover--up popover" style="top:10px;right:10px;">
  <div class="popover__content popover__content--android">
    <div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
  </div>
</div>

但是，当我尝试像从文档中那样使用它时，会打开弹出窗口，但是我没有发现使android样式正常工作的任何可能性。

有没有办法将ons.createPopover函数与“ more-popover.html”中的上述代码结合使用？

Answer 1

我在more-popover.html中解决了这个问题：

<ons-popover modifier="android more" cancelable>
    <ons-list>
      <ons-list-item ng-click="share()" modifier="tappable">Teilen</ons-list-item>
      <ons-list-item ng-click="quit()" modifier="tappable">Beenden</ons-list-item>
    </ons-list>
</ons-popover>

通过将修改器设置为android，我得到了Android样式。 我还添加了更多作为修饰符，以便如果popoverarrow是“ more” -popover的子元素，则可以删除箭头：

app.css：

.popover--more .popover__right-arrow, .popover__bottom-arrow, .popover__left-arrow, .popover__top-arrow {
  display: none;
}