4837


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


CC BY-SA 3.0
2015-01-16T08:47:01.553
4684
2015-01-19T08:20:02.883
2015-01-16T08:53:50.623
724
7461
question
html5 onsen-ui
ドロップダウンメニューをOnsen UIで実装することはできますか?


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

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

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

[code]

    <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>
    
[/code]

**JavaScript**

[code]

    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);
      };
    });
    
[/code]


CC BY-SA 3.0
2015-01-19T08:20:02.883
4837
2015-01-19T08:20:02.883
3516
4684
answer