使用Onsen Ui创建类似Android的Popover

Question

I am currently creating an Android App with Phonegap + Onsen UI. Now, I have an Android-like more Button (three dots) in my menu, and when somebody clicks on it, I want to open this typical "More-Button Menu". There is an example for an android popover with onsen ui over here , but when you take a look at the components documentation , you can't read something about the android popover anymore.

My problem is, that when I take the popover code from the example, I cant open it with the code from the documentation:

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

more-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>

But when I try to use it like from the documentation, the popover opens, but I did not found any possibility to get the android style working.

Is there a way to use the ons.createPopover Function with the above code from "more-popover.html" or any other way?

Answer 1

I solved the problem with using this inside the 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>

With setting the modifier to android, I've got the Android Style. I also added more as modifier, so that I can remove the arrows, if the popoverarrow is a sub-element of the "more"-popover:

app.css:

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