Создайте всплывающее окно в стиле Android с помощью Onsen Ui

В настоящее время я создаю приложение для Android с пользовательским интерфейсом Phonegap + Onsen. Теперь у меня есть Android-подобная кнопка «Дополнительно» (три точки) в моем меню, и когда кто-то нажимает на нее, я хочу открыть это типичное «Дополнительное меню». Существует пример всплывающего окна Android с пользовательским интерфейсом onsen здесь, но когда вы посмотрите на документация по компонентам, вы больше ничего не сможете прочитать о всплывающем окне 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» или любым другим способом?


android cordova onsen-ui
person Eknoes    schedule 25.12.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я решил проблему с использованием этого внутри 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. Я также добавил больше в качестве модификатора, чтобы я мог удалить стрелки, если всплывающая стрелка является подэлементом «больше»-всплывающего окна:

app.css:

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