使用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;
}