Ionic-JavaScriptサイドメニュー

サイドメニューは、最も使用されているIonicコンポーネントの1つです。サイドメニューは、左または右にスワイプするか、その目的で作成されたボタンをトリガーすることで開くことができます。

サイドメニューの使用

必要な最初の要素は ion-side-menus。この要素は、サイドメニューをそれを使用するすべての画面に接続するために使用されます。ザ・ion-side-menu-content 要素はコンテンツが配置される場所であり、 ion-side-menu 要素は私たちが置くことができる場所です side指令。サイドメニューをに追加しますindex.html を配置します ion-nav-viewサイドメニューのコンテンツ内。このようにして、サイドメニューをアプリ全体で使用できます。

index.html

<ion-side-menus>

   <ion-side-menu>side = "left">
      <h1>SIde Menu</h1>
   </ion-side-menu>

   <ion-side-menu-content>
      <ion-nav-view>
      </ion-nav-view>
   </ion-side-menu-content>

</ion-side-menus>

次に、ボタンを作成します with menu-toggle = "left"指令。このボタンは通常、アプリのヘッダーバーに配置されますが、理解を深めるためにテンプレートファイルに追加します。

ボタンをタップするか、右にスワイプすると、サイドメニューが開きます。を設定することもできますmenu-close サイドメニューを閉じるためのボタンを1つだけにしたい場合は、ディレクティブ。ただし、これにはトグルボタンを使用します。

HTMLテンプレート

<button menu-toggle = "left" class = "button button-icon icon ion-navicon"></button>

上記のコードは次の画面を生成します-

にいくつかの属性を追加できます ion-side-menus素子。ザ・enable-menu-with-back-views戻るボタンが表示されているときにサイドメニューを無効にするには、falseに設定できます。これはまた非表示になりますmenu-toggleヘッダーのボタン。他の属性はdelegate-handle、との接続に使用されます $ionicSideMenuDelegate。

ザ・ ion-side-menu-content要素は独自の属性を使用できます。いつdrag-content属性がfalseに設定されている場合、コンテンツ画面をスワイプしてサイドメニューを開く機能が無効になります。ザ・edge-drag-threshold属性のデフォルト値は25です。これは、スワイプが画面の左端と右端から25ピクセルのみ許可されることを意味します。この数値を変更するか、次のように設定できますfalse 画面全体をスワイプできるようにする、または true 無効にします。

ザ・ ion-side-menu 使用できます side上記の例で示した属性。メニューを左側から表示するか右側から表示するかを決定します。ザ・‘is-enabled’ false値の属性はサイドメニューを無効にし、 width属性値は、サイドメニューの幅を表す数値です。デフォルト値は275です。

サイドメニューデリゲート

ザ・ $ionicSideMenuDelegateアプリのすべてのサイドメニューを制御するために使用されるサービスです。使用方法を説明した後、利用可能なすべてのオプションについて説明します。すべてのIonicサービスと同様に、コントローラーへの依存関係として追加し、コントローラーのスコープ内で使用する必要があります。これで、ボタンをクリックすると、すべてのサイドメニューが開きます。

コントローラコード

.controller('MyCtrl', function($scope, $ionicSideMenuDelegate) {
   $scope.toggleLeftSideMenu = function() {
      $ionicSideMenuDelegate.toggleLeft();
   };
})

HTMLコード

<button class = "button button-icon icon ion-navicon" ng-click = "toggleLeft()"></button>

次の表は、 $ionicScrollDelegate メソッド。

デリゲートメソッド

方法	パラメーター	タイプ	詳細
トグルレフト（パラメーター）	isOpen	ブール値	サイドメニューを開いたり閉じたりするために使用されます。
tokenRight（パラメータ）	isOpen	ブール値	サイドメニューを開いたり閉じたりするために使用されます。
getOpenRatio（）	/	/	メニュー幅に対する開いている部分の比率を返します。メニューの半分を左から開いている場合、配給量は0.5になります。サイドメニューを閉じると0が返されます。メニューの半分が右側から開いていると、-0.5が返されます。
isOpen（）	/	ブール値	サイドメニューが開いている場合はtrueを返し、閉じている場合はfalseを返します。
isOpenLeft（）	/	ブール値	左側のメニューが開いている場合はtrueを返し、閉じている場合はfalseを返します。
isOpenRight（）	/	ブール値	右側のメニューが開いている場合はtrueを返し、閉じている場合はfalseを返します。
getScrollPosition（）	/	/	プロパティとして2つの数値を持つオブジェクトを返します。 left そして right。これらの数値は、ユーザーが左からスクロールした距離と上からスクロールした距離をそれぞれ表します。
canDragContent（parameter1）	canDrag	ブール値	コンテンツをドラッグしてサイドメニューを開くことができるかどうか。
edgeDragThreshold（parameter1）	値	ブール|数値	値が true、画面の端から25pxドラッグすると、サイドメニューを開くことができます。falseの場合、ドラッグは無効になります。画面の左端と右端からのピクセル値を表す任意の数値を設定できます。
$ getByHandle（parameter1）	扱う	ストリング	同じハンドルでメソッドを特定のサイドメニュービューに接続するために使用されます。 $ionicSideMenuDelegate. $getByHandle('my-handle').toggleLeft();