Ionic Side Menu

Ein Containerelement enthält das Seitenmenü und den Hauptinhalt. Durch Ziehen des Hauptinhaltsbereichs von einer Seite zur anderen wird das linke oder rechte Seitenmenü umgeschaltet.

Der Effekt ist unten dargestellt:

Nutzung

Um das Seitenmenü zu verwenden, fügen Sie ein übergeordnetes Element `<ion-side-menus>`, einen zwischengeschalteten Inhalt `<ion-side-menu-content>` und eine oder mehrere `<ion-side-menu>`-Direktiven hinzu.

<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

ion-side-menu-content

Ein Container für den sichtbaren Hauptinhalt, mit einer oder mehreren `ionSideMenu`-Direktiven als Geschwister.

Nutzung

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

API

ion-side-menu

Ein Container für ein Seitenmenü, mit einer `ion-side-menu-content`-Direktive als Geschwister.

Nutzung

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

API

menu-toggle

Schaltet das Menü in einem bestimmten Seitenmenü um.

Nutzung

Unten sehen Sie ein Beispiel für einen Link in der Navigationsleiste. Wenn Sie auf diesen Link klicken, wird das angegebene Seitenmenü automatisch geöffnet.

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

menu-close

Schließt das aktuell geöffnete Seitenmenü.

Nutzung

Unten sehen Sie ein Beispiel für einen Link in der Navigationsleiste. Wenn Sie auf diesen Link klicken, wird das angegebene Seitenmenü automatisch geöffnet.

<a menu-close href="../index.html" class="item">首页</a>

$ionicSideMenuDelegate

Diese Methode ruft direkt den Dienst $ionicSideMenuDelegate auf, um alle Seitenmenüs zu steuern. Verwenden Sie die Methode $getByHandle, um ionSideMenus in bestimmten Fällen zu steuern.

Nutzung

<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();
  };
}

Methoden

toggleLeft([isOpen])

Schaltet das linke Seitenmenü um (falls vorhanden).

toggleRight([isOpen])

Schaltet das rechte Seitenmenü um (falls vorhanden).

getOpenRatio()

Ermittelt den Anteil des geöffneten Menüinhalts, der die Menübreite überschreitet. Beispiel: Ein Menü mit einer Breite von 100px, das zu 50% (50px) geöffnet ist, gibt einen Verhältniswert von 0.5 zurück.

Rückgabewert:Float. 0 bedeutet nicht geöffnet. Wenn das linke Menü geöffnet ist oder geöffnet wird, ist es 0 bis 1; wenn das rechte Menü geöffnet ist oder geöffnet wird, ist es 0 bis -1.

isOpen()

Rückgabewert:Boolean, bestimmt, ob das linke oder rechte Menü bereits geöffnet ist.

isOpenLeft()

Rückgabewert:Boolean, ob das linke Menü bereits geöffnet ist.

isOpenRight()

Rückgabewert:Boolean, ob das rechte Menü bereits geöffnet ist.

canDragContent([canDrag])

Rückgabewert:Boolean, ob der Inhalt gezogen werden kann, um das Seitenmenü zu öffnen.

$getByHandle(handle)

Zum Beispiel:

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