Ionic-JavaScriptサイドメニュー

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

サイドメニューを使用する

必要な最初の要素は ion-side-menus です。この要素は、サイドメニューを使用するすべての画面にサイドメニューを接続するために使用されます。 ion-side-menu-content 要素はコンテンツが配置される場所であり、 ion-side-menu 要素は side ディレクティブを配置できる場所です。 indexl にサイドメニューを追加し、サイドメニューのコンテンツ内に ion-nav-view を配置します。このようにして、アプリ全体でサイドメニューを使用できます。

インデックス

<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>

ここで、menu-toggle = "left" *ディレクティブを使用してボタンを作成します。通常、このボタンはアプリのヘッダーバーに配置されますが、理解を深めるためにテンプレートファイルに追加します。

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

HTMLテンプレート

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

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

Ionic Javascript Side Menu

*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 メソッドを示しています。

デリゲートメソッド

Method	Parameters	Type	Details
toggleLeft(parameter)	isOpen	Boolean	Used for opening or closing side menu.
toggleRight(parameter)	isOpen	Boolean	Used for opening or closing side menu.
getOpenRatio()	/	/	Returns ratio of open part over menu width. If half of the menu is open from the left, the ration will be 0.5. If side menu is closed, it will return 0. If half of the menu is open from the right side, it will return -0.5.
isOpen()	/	Boolean	Returns true if side menu is open, false if it is closed.
isOpenLeft()	/	Boolean	Returns true if left side menu is open, false if it is closed.
isOpenRight()	/	Boolean	Returns true if right side menu is open, false if it is closed.
getScrollPosition()	/	/	Returns object with two number as properties: *left and** right*. These numbers represent the distance the user has scrolled from the left and from the top respectively.
canDragContent(parameter1)	canDrag	Boolean	Whether the content can be dragged to open side menu.
edgeDragThreshold(parameter1)	value	Boolean	number
If the value is true, the side menu can be opened by dragging 25px from the edges of the screen. If it is false, dragging is disabled. We can set any number that will represent pixel value from the left and right edge of the screen.	$getByHandle(parameter1)	handle	string

Ionic-js-side-menu