1

ドロップダウンメニューをOnsen UIで実装することはできますか?

2
  • 英語版に同じ質問がありました。 できるみたいですよ。 stackoverflow.com/questions/27123068/…
    – ita_3y
    Commented 2015年1月16日 9:32
  • @ita_3y 英語を読めないユーザーがいるため、できれば英語の質問の内容をサマライズして、回答として投稿したら将来の検索者をより便利にします。
    – jmac
    Commented 2015年1月19日 3:07

1 件の回答 1

2

「ons-popover」というコンポーネントを使用するとできるようです。
http://ja.onsen.io/guide/components.html#ons-popover

実装例は英語版の回答者の方が記載している下記リンク先が分かりやすいです。
http://codepen.io/argelius/pen/zxGEza

上記リンクを参考にした方が良いですが、公式のサンプルから一部抜粋してみました。
※リスト部分は英語版の回答からお借りしました。
HTML

<div ng-controller="AppController" class="page">
  <div class="navigation-bar">
    <span id="navigation" ng-click="show('#navigation')" class="toolbar-button--outline navigation-bar__line-height">
      <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
    </span>
  </div>
</div>

<ons-template id="popover.html">
  <ons-popover direction="down" cancelable>
    <ons-list>
      <ons-list-item modifier="tappable">Menu 1</ons-list-item>
      <ons-list-item modifier="tappable">Menu 2</ons-list-item>
      <ons-list-item modifier="tappable">Menu 3</ons-list-item>
    </ons-list>
  </ons-popover>
</ons-template>

JavaScript

var module = ons.bootstrap();
module.controller('AppController', function($scope) {
  ons.createPopover('popover.html').then(function(popover) {
    $scope.popover = popover;
  });

  $scope.show = function(e) {
    $scope.popover.show(e);
  };
});

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。