Ionic - menu boczne JavaScript

Menu boczne jest jednym z najczęściej używanych komponentów jonowych. Menu boczne można otworzyć, przesuwając palcem w lewo lub w prawo lub naciskając przycisk utworzony w tym celu.

Korzystanie z menu bocznego

Pierwszym elementem, którego potrzebujemy, jest ion-side-menus. Ten element służy do połączenia menu bocznego ze wszystkimi ekranami, które będą z niego korzystać. Plikion-side-menu-content element to miejsce, w którym zostanie umieszczona zawartość, a plik ion-side-menu element to miejsce, w którym możemy umieścić plik sidedyrektywa. Dodamy menu boczne do plikuindex.html i umieść ion-nav-viewwewnątrz zawartości menu bocznego. W ten sposób z menu bocznego można korzystać w całej aplikacji.

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>

Teraz stworzymy przycisk with menu-toggle = "left"dyrektywa. Ten przycisk zwykle znajduje się na pasku nagłówka aplikacji, ale dodamy go do naszego pliku szablonu, aby lepiej zrozumieć.

Po dotknięciu przycisku lub przesunięciu palcem w prawo otworzy się menu boczne. Możesz także ustawićmenu-close dyrektywy, jeśli chcesz mieć tylko jeden przycisk do zamykania menu bocznego, ale użyjemy do tego przycisku przełącznika.

Szablon HTML

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

Powyższy kod wygeneruje następujący ekran -

Możesz dodać dodatkowe atrybuty do ion-side-menuselement. Plikenable-menu-with-back-viewsmożna ustawić na fałsz, aby wyłączyć menu boczne, gdy wyświetlany jest przycisk Wstecz. Spowoduje to również ukrycie plikumenu-toggleprzycisk z nagłówka. Drugi atrybut todelegate-handle, który będzie używany do połączenia z $ionicSideMenuDelegate.

Plik ion-side-menu-contentelement może używać własnego atrybutu. Kiedydrag-contentatrybut ma wartość false, wyłączy możliwość otwierania menu bocznego przez przeciągnięcie ekranu zawartości. Plikedge-drag-thresholdatrybut ma domyślną wartość 25. Oznacza to, że przesuwanie jest dozwolone tylko o 25 pikseli od lewej i prawej krawędzi ekranu. Możemy zmienić tę wartość liczbową lub ustawić ją nafalse aby włączyć przesuwanie po całym ekranie lub true aby go wyłączyć.

Plik ion-side-menu może użyć sideatrybut, który pokazaliśmy w powyższym przykładzie. Określa, czy menu powinno pojawiać się z lewej, czy z prawej strony. Plik‘is-enabled’ atrybut z wartością false wyłączy menu boczne, a widthwartość atrybutu to liczba określająca, jak szerokie powinno być menu boczne. Wartość domyślna to 275.

Delegat menu bocznego

Plik $ionicSideMenuDelegateto usługa służąca do kontrolowania wszystkich menu bocznych w aplikacji. Pokażemy Ci, jak z niego korzystać, a następnie przejrzymy wszystkie dostępne opcje. Podobnie jak wszystkie usługi Ionic, musimy dodać go jako zależność do naszego kontrolera, a następnie użyć go w zakresie kontrolera. Teraz, gdy klikniemy przycisk, otworzą się wszystkie menu boczne.

Kod kontrolera

.controller('MyCtrl', function($scope, $ionicSideMenuDelegate) {
   $scope.toggleLeftSideMenu = function() {
      $ionicSideMenuDelegate.toggleLeft();
   };
})

Kod HTML

<button class = "button button-icon icon ion-navicon" ng-click = "toggleLeft()"></button>

W poniższej tabeli przedstawiono $ionicScrollDelegate metody.

Metody delegowania

metoda	Parametry	Rodzaj	Detale
toggleLeft (parametr)	jest otwarte	Boolean	Służy do otwierania lub zamykania menu bocznego.
toggleRight (parametr)	jest otwarte	Boolean	Służy do otwierania lub zamykania menu bocznego.
getOpenRatio ()	/	/	Zwraca stosunek otwartej części do szerokości menu. Jeśli połowa menu jest otwarta z lewej strony, racja wyniesie 0,5. Jeśli menu boczne jest zamknięte, zwróci 0. Jeśli połowa menu jest otwarta z prawej strony, zwróci -0,5.
jest otwarte()	/	Boolean	Zwraca prawdę, jeśli menu boczne jest otwarte, fałsz, jeśli jest zamknięte.
isOpenLeft ()	/	Boolean	Zwraca wartość true, jeśli menu po lewej stronie jest otwarte, false, jeśli jest zamknięte.
isOpenRight ()	/	Boolean	Zwraca true, jeśli menu po prawej stronie jest otwarte, false, jeśli jest zamknięte.
getScrollPosition ()	/	/	Zwraca obiekt z dwoma liczbami jako właściwościami: left i right. Liczby te reprezentują odległość, którą użytkownik przewinął odpowiednio od lewej i od góry.
canDragContent (parametr1)	canDrag	Boolean	Czy zawartość można przeciągać do otwierania menu bocznego.
edgeDragThreshold (parametr1)	wartość	Boolean | liczba	Jeśli wartość to true, boczne menu można otworzyć, przeciągając 25 pikseli od krawędzi ekranu. Jeśli jest fałszywa, przeciąganie jest wyłączone. Możemy ustawić dowolną liczbę, która będzie reprezentować wartość piksela od lewej i prawej krawędzi ekranu.
$ getByHandle (parametr1)	uchwyt	strunowy	Służy do łączenia metod z określonym widokiem menu bocznego za pomocą tego samego uchwytu. $ionicSideMenuDelegate. $getByHandle('my-handle').toggleLeft();