Ionic - Menu bên JavaScript

Menu bên là một trong những thành phần Ionic được sử dụng nhiều nhất. Menu Bên có thể được mở bằng cách vuốt sang trái hoặc phải hoặc bằng cách kích hoạt nút được tạo cho mục đích đó.

Sử dụng Menu bên

Yếu tố đầu tiên mà chúng ta cần là ion-side-menus. Phần tử này được sử dụng để kết nối menu bên với tất cả các màn hình sẽ sử dụng nó. Cácion-side-menu-content là nơi nội dung sẽ được đặt và ion-side-menu phần tử là nơi mà chúng ta có thể đặt một sidechỉ thị. Chúng tôi sẽ thêm menu bên vàoindex.html và đặt ion-nav-viewbên trong nội dung menu bên. Bằng cách này, menu bên có thể được sử dụng trong toàn bộ ứng dụng.

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>

Bây giờ, chúng ta sẽ tạo nút with menu-toggle = "left"chỉ thị. Nút này thường sẽ được đặt trong thanh tiêu đề ứng dụng, nhưng chúng tôi sẽ thêm nó vào tệp mẫu để hiểu rõ hơn.

Khi nhấn vào nút hoặc khi chúng ta vuốt sang phải, menu bên sẽ mở ra. Bạn cũng có thể đặtmenu-close chỉ thị, nếu bạn chỉ muốn có một nút để đóng menu bên, nhưng chúng tôi sẽ sử dụng nút bật tắt cho việc này.

Mẫu HTML

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

Đoạn mã trên sẽ tạo ra màn hình sau:

Bạn có thể thêm một số thuộc tính bổ sung vào ion-side-menusthành phần. Cácenable-menu-with-back-viewscó thể được đặt thành false để tắt menu bên, khi nút quay lại hiển thị. Điều này cũng sẽ ẩnmenu-toggletừ tiêu đề. Thuộc tính khác làdelegate-handle, sẽ được sử dụng cho kết nối với $ionicSideMenuDelegate.

Các ion-side-menu-contentphần tử có thể sử dụng thuộc tính riêng của nó. Khi màdrag-contentđược đặt thành false, nó sẽ vô hiệu hóa khả năng mở menu bên bằng cách vuốt màn hình nội dung. Cácedge-drag-thresholdthuộc tính có giá trị mặc định là 25. Điều này có nghĩa là chỉ cho phép vuốt 25 pixel từ cạnh trái và phải của màn hình. Chúng tôi có thể thay đổi giá trị số này hoặc chúng tôi có thể đặt nó thànhfalse để cho phép vuốt trên toàn bộ màn hình hoặc true để vô hiệu hóa nó.

Các ion-side-menu có thể sử dụng sidemà chúng tôi đã hiển thị trong ví dụ trên. Nó sẽ xác định xem menu sẽ xuất hiện từ bên trái hay bên phải. Các‘is-enabled’ thuộc tính có giá trị sai sẽ vô hiệu hóa menu bên và widthgiá trị thuộc tính là một số thể hiện độ rộng của menu bên. Giá trị mặc định là 275.

Trình đơn bên ủy quyền

Các $ionicSideMenuDelegatelà một dịch vụ được sử dụng để kiểm soát tất cả các menu bên trong ứng dụng. Chúng tôi sẽ chỉ cho bạn cách sử dụng nó, và sau đó chúng tôi sẽ xem xét tất cả các tùy chọn có sẵn. Giống như tất cả các dịch vụ Ionic, chúng ta cần thêm nó như một phần phụ thuộc vào bộ điều khiển của chúng tôi và sau đó sử dụng nó trong phạm vi của bộ điều khiển. Bây giờ, khi chúng ta nhấp vào nút, tất cả các menu bên sẽ mở ra.

Mã điều khiển

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

Mã HTML

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

Bảng sau đây cho thấy $ionicScrollDelegate các phương pháp.

Phương pháp ủy quyền

phương pháp	Thông số	Kiểu	Chi tiết
toggleLeft (tham số)	isOpen	Boolean	Được sử dụng để mở hoặc đóng menu bên.
toggleRight (tham số)	isOpen	Boolean	Được sử dụng để mở hoặc đóng menu bên.
getOpenRatio ()	/	/	Trả về tỷ lệ của phần mở trên chiều rộng menu. Nếu một nửa thực đơn được mở từ bên trái, khẩu phần ăn sẽ là 0,5. Nếu menu bên được đóng, nó sẽ trả về 0. Nếu một nửa menu đang mở từ phía bên phải, nó sẽ trả về -0,5.
isOpen ()	/	Boolean	Trả về true nếu menu bên đang mở, false nếu menu bị đóng.
isOpenLeft ()	/	Boolean	Trả về true nếu menu bên trái đang mở, false nếu menu bị đóng.
isOpenRight ()	/	Boolean	Trả về true nếu menu bên phải đang mở, false nếu menu bị đóng.
getScrollPosition ()	/	/	Trả về đối tượng có hai số dưới dạng thuộc tính: left và right. Những con số này đại diện cho khoảng cách người dùng đã cuộn từ bên trái và từ trên xuống tương ứng.
canDragContent (tham số1)	canDrag	Boolean	Nội dung có thể được kéo để mở menu bên hay không.
edgeDragThreshold (tham số1)	giá trị	Boolean | số	Nếu giá trị là true, menu bên có thể được mở bằng cách kéo 25px từ các cạnh của màn hình. Nếu sai, tính năng kéo sẽ bị tắt. Chúng tôi có thể đặt bất kỳ số nào sẽ đại diện cho giá trị pixel từ cạnh trái và phải của màn hình.
$ getByHandle (tham số1)	xử lý	chuỗi	Được sử dụng để kết nối các phương thức với chế độ xem menu bên cụ thể với cùng một tay cầm. $ionicSideMenuDelegate. $getByHandle('my-handle').toggleLeft();