Question

我目前正在使用Phonegap + Onsen用户界面创建Android应用。现在，我的菜单中有一个类似Android的按钮（三个点），当有人点击它时，我想打开这个典型的“更多按钮菜单”。有一个带有onsen ui over here的Android popover的例子，但是当你看一下components documentation时，你就无法阅读有关android popover的内容了。

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

  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 Style。我还添加了更多的修饰符，这样我就可以删除箭头，如果popoverarrow是“更多”的子元素--popover：

<强> app.css：

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

使用Onsen Ui创建类似Android的Popover

1 个答案: