Ionic-JavaScript 사이드 메뉴

사이드 메뉴는 가장 많이 사용되는 Ionic 구성 요소 중 하나입니다. 사이드 메뉴는 왼쪽 또는 오른쪽으로 스 와이프하거나 해당 용도로 만든 버튼을 트리거하여 열 수 있습니다.

사이드 메뉴 사용

우리에게 필요한 첫 번째 요소는 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 (매개 변수)	isOpen	부울	사이드 메뉴를 열거 나 닫을 때 사용합니다.
toggleRight (매개 변수)	isOpen	부울	사이드 메뉴를 열거 나 닫을 때 사용합니다.
getOpenRatio ()	/	/	메뉴 너비에 대한 열린 부분의 비율을 반환합니다. 메뉴의 절반이 왼쪽에서 열리면 배급은 0.5가됩니다. 사이드 메뉴가 닫혀 있으면 0을 반환합니다. 오른쪽에서 메뉴의 절반을 열면 -0.5를 반환합니다.
isOpen ()	/	부울	사이드 메뉴가 열려 있으면 true를 반환하고 닫혀 있으면 false를 반환합니다.
isOpenLeft ()	/	부울	왼쪽 메뉴가 열려 있으면 true를 반환하고 닫혀 있으면 false를 반환합니다.
isOpenRight ()	/	부울	오른쪽 메뉴가 열려 있으면 true를 반환하고 닫혀 있으면 false를 반환합니다.
getScrollPosition ()	/	/	두 개의 숫자가있는 객체를 속성으로 반환합니다. left 과 right. 이 숫자는 사용자가 각각 왼쪽과 상단에서 스크롤 한 거리를 나타냅니다.
canDragContent (매개 변수 1)	canDrag	부울	콘텐츠를 드래그하여 사이드 메뉴를 열 수 있는지 여부입니다.
edgeDragThreshold (매개 변수 1)	값	부울 | 숫자	값이 true, 화면 가장자리에서 25px를 드래그하여 사이드 메뉴를 열 수 있습니다. false이면 드래그가 비활성화됩니다. 화면의 왼쪽과 오른쪽 가장자리에서 픽셀 값을 나타내는 숫자를 설정할 수 있습니다.
$ getByHandle (매개 변수 1)	핸들	끈	동일한 핸들을 사용하여 메서드를 특정 사이드 메뉴보기에 연결하는 데 사용됩니다. $ionicSideMenuDelegate. $getByHandle('my-handle').toggleLeft();