Ионный - Боковое меню JavaScript

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

Использование бокового меню

Первый элемент, который нам нужен, это ion-side-menus. Этот элемент используется для связи бокового меню со всеми экранами, которые будут его использовать. Вion-side-menu-content элемент - это место, где будет размещаться контент, а ion-side-menu элемент - это место, где мы можем поместить sideдиректива. Мы добавим боковое меню вindex.html и поместите ion-nav-viewвнутри содержимого бокового меню. Таким образом, боковое меню можно использовать во всем приложении.

index.html

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

Теперь создадим кнопку with menu-toggle = "left"директива. Эта кнопка обычно находится в строке заголовка приложения, но мы добавим ее в наш файл шаблона для лучшего понимания.

При нажатии на кнопку или при смахивании вправо открывается боковое меню. Вы также можете установитьmenu-close директиве, если вы хотите иметь одну кнопку только для закрытия бокового меню, но мы будем использовать для этого кнопку переключения.

HTML-шаблон

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

Приведенный выше код создаст следующий экран -

Вы можете добавить некоторые дополнительные атрибуты в 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 методы.

Методы делегата

Метод	Параметры	Тип	Детали
toggleLeft (параметр)	открыт	Булево	Используется для открытия или закрытия бокового меню.
toggleRight (параметр)	открыт	Булево	Используется для открытия или закрытия бокового меню.
getOpenRatio ()	/	/	Возвращает соотношение открытой части к ширине меню. Если половина меню открывается слева, то рацион будет 0,5. Если боковое меню закрыто, возвращается 0. Если половина меню открыта с правой стороны, возвращается -0,5.
открыт()	/	Булево	Возвращает true, если боковое меню открыто, и false, если оно закрыто.
isOpenLeft ()	/	Булево	Возвращает true, если левое меню открыто, false, если оно закрыто.
isOpenRight ()	/	Булево	Возвращает true, если правое меню открыто, false, если оно закрыто.
getScrollPosition ()	/	/	Возвращает объект с двумя числами в качестве свойств: left и right. Эти числа представляют собой расстояние, которое пользователь прокрутил слева и сверху соответственно.
canDragContent (параметр1)	canDrag	Булево	Можно ли перетащить контент в боковое меню.
edgeDragThreshold (параметр1)	значение	Логическое | число	Если значение равно true, боковое меню можно открыть, перетащив 25 пикселей от краев экрана. Если false, перетаскивание отключено. Мы можем установить любое число, которое будет представлять значение пикселя с левого и правого края экрана.
$ getByHandle (параметр1)	справиться	строка	Используется для подключения методов к определенному виду бокового меню с тем же дескриптором. $ionicSideMenuDelegate. $getByHandle('my-handle').toggleLeft();