Учебники

Ionic — боковое меню JavaScript

Сентябрь 12, 2018

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

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

Первый элемент, который нам нужен, это боковые меню . Этот элемент используется для соединения бокового меню со всеми экранами, которые будут его использовать. Элемент ионного бокового меню — это то место, куда будет помещаться контент, а элемент ионного бокового меню — это то место, куда мы можем поместить боковую директиву. Мы добавим боковое меню в 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>

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

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

HTML шаблон 

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

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

Ionic Javascript Side Menu

Вы можете добавить некоторые дополнительные атрибуты к элементу ion-side-menus . Для enable-menu-with-back-views можно установить значение false, чтобы отключить боковое меню, когда отображается кнопка «Назад». Это также скрывает кнопку переключения меню из заголовка. Другой атрибут — дескриптор делегата , который будет использоваться для соединения с $ ionicSideMenuDelegate .

Элемент ion-side-menu-content может использовать свой собственный атрибут. Если для атрибута drag-content установлено значение false, он отключит возможность открывать боковое меню, проводя по экрану содержимого. Атрибут edge-drag-threshold имеет значение по умолчанию 25. Это означает, что смахивание разрешено только в 25 пикселях от левого и правого края экрана. Мы можем изменить это числовое значение или установить его в false, чтобы включить прокрутку на весь экран, или в true, чтобы отключить его.

Меню ion-side может использовать атрибут 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 .

45
Share: