Latest web development tutorials

Меню ионной боковой панели

Контейнер элемент содержит боковое меню и основное содержание. Основная область содержимого путем перетаскивания из стороны в сторону, чтобы сделать левой или правой части строки меню для переключения.

Renderings являются следующие:

использование

Для использования меню боковой панели, добавить родительский элемент <ионному сторона-меню>, промежуточное содержание <ионно-боковой меню Содержание>, и один или более <ион-боковой меню> команды. 

<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

свойство тип деталь
перетащить содержимое
(Необязательно)
布尔值

Является ли содержание может быть втянута. По умолчанию это верно.

ионно-бокового меню

Боковое меню контейнера, родной брат Ионный стороне меню-контента.

использование 

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

Получить долю Открыть меню находится за пределами ширины меню. Например, меню 100px шириной является ширина 50px коэффициента открытия в размере 50%, отношение будет возвращать значение 0,5.

Возвращаемое значение: 0 с плавающей точкой представление не был открыт, если левая часть меню открывается или открываются до 0-1, если правая часть меню открывается или открываются от 0 до -1.

isOpen()

Возвращаемое значение: логическое значение определяет , левая или правая часть меню уже открыта ли.

isOpenLeft()

Возвращаемое значение: логические значения в левом меню было открыто.

isOpenRight()

Возвращаемое значение: логическое значение , если правая часть меню уже открыта.

canDragContent([canDrag])
параметры тип деталь
canDrag
(Необязательно)
布尔值

Вы можете перетащить содержимое установить, чтобы открыть меню боковой панели.

Возвращаемое значение: булева ли содержимое может быть втянута открыть меню боковой панели.

$getByHandle(handle)
параметры тип деталь
ручка 字符串

Например: 

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