ドロップダウンメニューをOnsen UIで実装することはできますか?
1 件の回答
「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);
};
});