イオンサイドバーメニュー


コンテナ要素には、サイド メニューとメイン コンテンツが含まれます。メインコンテンツ領域を左右にドラッグして、左または右のサイドバーメニューを切り替えます。

レンダリングは次のようになります:

3.gif

使用方法

サイドバー メニューを使用するには、親要素 <ion-side-menus>、中間コンテンツ <ion-side-menu-content>、および or を追加します。その他の <ion-side-menu> ディレクティブ。

<ion-side-menus>
  <!-- 中间内容 -->
  <ion-side-menu-content ng-controller="ContentController">
  </ion-side-menu-content>

  <!-- 左侧菜单 -->
  <ion-side-menu side="left">
  </ion-side-menu>

  <!-- 右侧菜单 -->
  <ion-side-menu side="right">
  </ion-side-menu>
</ion-side-menus>
rree


API

プロパティタイプ詳細
バックビュー付きメニューを有効にする
(オプション)
boolean< /code >布尔值

在返回按钮显示时,确认是否启用侧边栏菜单。

delegate-handle字符串该句柄用于标识带有$ionicScrollDelegate的滚动视图。

ion-side-menu-content

一个可见主体内容的容器,同级的一个或多个ionSideMenu 指令。

用法

function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

API

属性类型详情
drag-content
(可选)
布尔值

内容是否可被拖动。默认为true。


ion-side-menu

一个侧栏菜单的容器,同级的一个ion-side-menu-content 指令。

用法

<ion-side-menu-content
  drag-content="true">
</ion-side-menu-content>

API

delegate-handle
属性类型详情
side字符串

侧栏菜单当前在哪一边。可选的值有: 'left' 或 'right'。

is-enabled
(可选)
布尔值

该侧栏菜单是否可用。

width
(可选)
数值戻るボタン表示時にサイドバーメニューが有効になっているか確認してください。

🎜string🎜🎜このハンドルは、$ionicScrollDelegate でスクロール ビューを識別するために使用されます。 🎜🎜🎜🎜

ion-side-menu-content

🎜 表示される本文コンテンツ、同じレベルにある 1 つ以上の ionSideMenu ディレクティブのコンテナー。 🎜🎜使用法🎜
<ion-side-menu
  side="left"
  width="myWidthValue + 20"
  is-enabled="shouldLeftSideMenuBeEnabled()">
</ion-side-menu>
🎜API🎜🎜🎜🎜🎜プロパティ🎜🎜タイプ🎜🎜詳細🎜🎜🎜🎜🎜🎜ドラッグコンテンツ🎜🎜(オプション)🎜🎜🎜🎜 < code> boolean 🎜🎜🎜コンテンツをドラッグできます。デフォルトは true です。 🎜🎜🎜🎜🎜

ion-side-menu

🎜 サイド メニューのコンテナ、同じレベルの ion-side-menu-content ディレクティブ。 🎜🎜使用法🎜
<ion-view>
  <ion-nav-buttons side="left">
   <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
 ...
</ion-view>
🎜API🎜🎜🎜🎜🎜プロパティ🎜🎜タイプ🎜🎜詳細🎜🎜🎜🎜🎜🎜side🎜🎜String🎜🎜🎜どちらの側か現在表示されているサイドバーメニュー。オプションの値は「left」または「right」です。 🎜🎜🎜🎜🎜is-enabled🎜🎜(オプション)🎜🎜🎜🎜boolean🎜🎜🎜サイドバーメニューが利用可能かどうか。 🎜🎜🎜🎜🎜幅🎜🎜(オプション)🎜🎜🎜🎜数値🎜🎜🎜サイドバーメニューの幅をピクセル数で指定します。デフォルトは 275 です。 🎜🎜🎜🎜🎜

menu-toggle

指定したサイドバーのメニューを切り替えます。

使用方法

以下は、ナビゲーション バーのリンクの例です。このリンクをクリックすると、指定されたサイドバー メニューが自動的に開きます。

<a menu-close href="#/home" class="item">首页</a>

menu-close

現在開いているサイドバーメニューを閉じます。

使用方法

以下は、ナビゲーション バーのリンクの例です。このリンクをクリックすると、指定されたサイドバー メニューが自動的に開きます。

<body ng-controller="MainCtrl">
  <ion-side-menus>
    <ion-side-menu-content>
      内容!
      <button ng-click="toggleLeftSideMenu()">
        切换左侧侧栏菜单
      </button>
    </ion-side-menu-content>
    <ion-side-menu side="left">
      左侧菜单!
    <ion-side-menu>
  </ion-side-menus>
</body>

$ionicSideMenuDelegate

このメソッドは、$ionicSideMenuDelegate サービスを直接トリガーして、すべてのサイドバー メニューを制御します。特定の状況下で ionSideMenus を制御するには、$getByHandle メソッドを使用します。

使用法

function MainCtrl($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeftSideMenu = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}
toggleLeft([isOpen])

方法

toggleRight([isOpen])

左側のサイドバーメニューがある場合は切り替えます。

パラメータタイプ詳細
isOpen
(オプション)
Boolean布尔值

是否打开或关闭菜单。默认:切换菜单。

getOpenRatio()

切换右侧侧栏菜单(如果存在)。

参数类型详情
isOpen
(可选)
布尔值

是否打开或关闭菜单。默认:切换菜单。

isOpen()

获取打开菜单内容超出菜单宽度的比例。比如,一个宽度为100px的菜单被宽度为50px以50%的比例打开,将会返回一个比例值为0.5。

返回值: 浮点 0 表示没被打开,如果左侧菜单处于已打开或正在打开为0 到 1,如果右侧菜单处于已打开或正在打开为0 到-1。

isOpenLeft()

返回值: 布尔值,判断左侧或右侧菜单是否已经打开。

isOpenRight()

返回值: 布尔值左侧菜单是否已经打开。

canDragContent([canDrag])

返回值: 布尔值右侧菜单是否已经打开。

$getByHandle(handle)
参数类型详情
canDrag
(可选)
布尔值

设置是否可以拖动内容打开侧栏菜单。

返回值: 布尔值,是否可以拖动内容打开侧栏菜单。

$ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();
参数类型详情
handle字符串メニューを開くか閉じるか。デフォルト: トグルメニュー。
rrreee

右側のサイドバーメニューがある場合はそれを切り替えます。

🎜🎜🎜パラメータ🎜🎜タイプ🎜🎜詳細🎜🎜🎜🎜🎜🎜isOpen🎜🎜(オプション)🎜🎜🎜🎜Boolean🎜🎜🎜メニューを開くか閉じるか。デフォルト: トグルメニュー。 🎜🎜🎜🎜🎜rrreee🎜 開いているメニュー内容がメニュー幅を超える割合を取得します。たとえば、幅 100 ピクセルのメニューを幅 50 ピクセル、スケール 50% で開くと、スケール値 0.5 が返されます。 🎜🎜戻り値: 浮動小数点 0 は、左側のメニューが開いているか開いている場合は 0 ~ 1 です。右側のメニューが開いているか開いている場合は 0 ~ - です。 1. 🎜rrreee🎜戻り値: 左または右のメニューが開いているかどうかを判断するブール値。 🎜rrreee🎜戻り値: 左側のメニューが開いているかどうかのブール値。 🎜rrreee🎜戻り値: 正しいメニューが開いているかどうかのブール値。 🎜rrreee🎜🎜🎜🎜パラメータ🎜🎜タイプ🎜🎜詳細🎜🎜🎜🎜🎜🎜canDrag🎜🎜(オプション)🎜🎜🎜🎜Boolean🎜🎜🎜ドラッグするかどうかを設定ジンギングが可能 コンテンツサイドバーメニューを開く。 🎜🎜🎜🎜🎜🎜戻り値: コンテンツをドラッグしてサイドバー メニューを開くことができるかどうかのブール値。 🎜rrreee🎜🎜🎜🎜Parameters🎜🎜Type🎜🎜Details🎜🎜🎜🎜🎜🎜handle🎜🎜String🎜🎜🎜🎜🎜🎜🎜🎜例: 🎜リーリー🎜