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

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

次のようにレンダリングは、次のとおりです。

使用法

サイドバーのメニューを使用するには、親要素<イオン側-メニュー>、中間コンテンツ<イオン側メニュー・コンテンツ>、および1つ以上の<イオン側メニュー>コマンドを追加します。

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

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

API

プロパティ	タイプ	詳細
有効-メニューとバック・ビュー（オプション）	`布尔值`	戻るボタン表示では、サイドバーのメニューを有効にするかどうかを確認します。
デリゲートハンドル	文字列	ハンドルは$ ionicScrollDelegateとの同一性のビューをスクロールするために使用されます。

イオン側メニューコンテンツ

容器本体の可視内容、兄弟以上ionSideMenu命令。

使用法

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

API

プロパティ	タイプ	詳細
ドラッグ＆コンテンツ（オプション）	`布尔值`	コンテンツはドラッグすることができるかどうか。デフォルトはtrueです。

イオン側メニュー

コンテナのサイドバーのメニュー、イオン側メニュー・コンテンツ命令の兄弟。

使用法

<ion-side-menu
  side="left"
  width="myWidthValue + 20"
  is-enabled="shouldLeftSideMenuBeEnabled()">
</ion-side-menu>

API

プロパティ	タイプ	詳細
サイド	`字符串`	現在、サイドバーメニューの側面。オプションの値は次のとおりです。「左」または「右」。
-有効になっています（オプション）	`布尔值`	サイドバーメニューが利用可能です。
幅（オプション）	`数值`	サイドバーのメニューは、ピクセル幅の数でなければなりません。デフォルトは275です。

メニュートグル

サイドバーでメニューを切り替え指定。

使用法

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

<ion-view>
  <ion-nav-buttons side="left">
   <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
 ...
</ion-view>

メニュークローズ

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

使用法

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

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

$ IonicSideMenuDelegate

この方法は、直接、すべてのサイドバーのメニューを制御するために、$ ionicSideMenuDelegateサービスをトリガします。コントロールionSideMenus $ getByHandle方法と特定のケース。

使用法

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

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

ウェイ

toggleLeft([isOpen])

（存在する場合）左のサイドバーのメニューに切り替えます。

パラメータ	タイプ	詳細
いるisOpen （オプション）	`布尔值`	メニューを開いたり閉じたりするかどうか。デフォルト：メニューを切り替えます。

toggleRight([isOpen])

（存在する場合）、メニューバーの右側に切り替えます。

パラメータ	タイプ	詳細
いるisOpen （オプション）	`布尔值`	メニューを開いたり閉じたりするかどうか。デフォルト：メニューを切り替えます。

getOpenRatio()

割合は、メニューを開きなさい、メニューの幅を超えています。例えば、100ピクセル幅のメニューは50％のは50pxの開口率の幅であり、比率は0.5の値を返します。

戻り値：メニューの左側が開いているか0-1に開いている、メニューの右側が開放された場合、または0から-1に開いている場合は0浮動小数点表現は、開かれていません。

isOpen()

戻り値：ブール値は、メニューの左側または右側が既に開いているかどうかを決定します。

isOpenLeft()

戻り値：左メニューのブール値が開かれています。

isOpenRight()

メニューの右側がすでに開いている場合はブール値：値を返します。

canDragContent([canDrag])

パラメータ	タイプ	詳細
canDrag （オプション）	`布尔值`	あなたは、サイドバーのメニューを開くように設定されているコンテンツをドラッグすることができます。

戻り値：コンテンツはサイドバーのメニューを開いてドラッグできるかどうかをブール値。

$getByHandle(handle)

パラメータ	タイプ	詳細
ハンドル	`字符串`

例えば：

$ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();

前：イオンスクロールバー

次へ：イオンスライドフレーム

ionic コース

ionic CSS

ionic JavaScript