Ionic - Menu Samping JavaScript

Menu samping adalah salah satu komponen ionik yang paling banyak digunakan. Menu Samping dapat dibuka dengan menggesek ke kiri atau kanan atau dengan memicu tombol yang dibuat untuk tujuan itu.

Menggunakan Menu Samping

Elemen pertama yang kita butuhkan adalah ion-side-menus. Elemen ini digunakan untuk menghubungkan menu samping dengan semua layar yang akan menggunakannya. Ituion-side-menu-content elemen adalah tempat konten akan ditempatkan dan ion-side-menu elemen adalah tempat kita bisa meletakkan file sidepengarahan. Kami akan menambahkan menu samping keindex.html dan tempatkan ion-nav-viewdi dalam konten menu samping. Dengan cara ini menu samping dapat digunakan di seluruh aplikasi.

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>

Sekarang, kita akan membuat tombol with menu-toggle = "left"pengarahan. Tombol ini biasanya akan ditempatkan di bilah tajuk aplikasi, tetapi kami akan menambahkannya di file templat kami untuk pemahaman yang lebih baik.

Saat tombol diketuk atau saat kita menggesek ke kanan, menu samping akan terbuka. Anda juga bisa mengaturmenu-close direktif, jika Anda ingin memiliki satu tombol hanya untuk menutup menu samping, tetapi kami akan menggunakan tombol sakelar untuk ini.

Template HTML

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

Kode di atas akan menghasilkan layar berikut -

Anda dapat menambahkan beberapa atribut tambahan ke ion-side-menuselemen. Ituenable-menu-with-back-viewsdapat disetel ke false untuk menonaktifkan menu samping, saat tombol kembali ditampilkan. Ini juga akan menyembunyikan filemenu-toggletombol dari header. Atribut lainnya adalahdelegate-handle, yang akan digunakan untuk koneksi dengan $ionicSideMenuDelegate.

Itu ion-side-menu-contentelemen dapat menggunakan atributnya sendiri. Ketikadrag-contentatribut disetel ke false, ini akan menonaktifkan kemampuan untuk membuka menu samping dengan menggesek layar konten. Ituedge-drag-thresholdatribut memiliki nilai default 25. Ini berarti menggesek hanya diperbolehkan 25 piksel dari tepi kiri dan kanan layar. Kita bisa mengubah nilai angka ini atau kita bisa mengaturnya kefalse untuk mengaktifkan menggesek di seluruh layar atau true untuk menonaktifkannya.

Itu ion-side-menu bisa menggunakan sideatribut yang kami tunjukkan pada contoh di atas. Ini akan menentukan apakah menu harus muncul dari sisi kiri atau kanan. Itu‘is-enabled’ atribut dengan nilai palsu akan menonaktifkan menu samping, dan widthnilai atribut adalah angka yang menunjukkan seberapa lebar menu samping seharusnya. Nilai defaultnya adalah 275.

Delegasi Menu Samping

Itu $ionicSideMenuDelegateadalah layanan yang digunakan untuk mengontrol semua menu samping di aplikasi. Kami akan menunjukkan cara menggunakannya, dan kemudian kami akan memeriksa semua opsi yang tersedia. Seperti semua layanan Ionic, kita perlu menambahkannya sebagai dependensi ke pengontrol kita dan kemudian menggunakannya di dalam ruang lingkup pengontrol. Sekarang, ketika kita mengklik tombolnya, semua menu samping akan terbuka.

Kode Pengontrol

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

Kode HTML

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

Tabel berikut menunjukkan $ionicScrollDelegate metode.

Metode Delegasi

metode	Parameter	Tipe	Detail
toggleLeft (parameter)	terbuka	Boolean	Digunakan untuk membuka atau menutup menu samping.
toggleRight (parameter)	terbuka	Boolean	Digunakan untuk membuka atau menutup menu samping.
getOpenRatio ()	/	/	Mengembalikan rasio bagian terbuka di atas lebar menu. Jika setengah dari menu dibuka dari kiri, ransumnya adalah 0,5. Jika menu samping ditutup, ia akan kembali 0. Jika setengah dari menu dibuka dari sisi kanan, ia akan kembali -0.5.
terbuka()	/	Boolean	Mengembalikan nilai benar jika menu samping terbuka, salah jika ditutup.
isOpenLeft ()	/	Boolean	Mengembalikan nilai benar jika menu sisi kiri terbuka, salah jika ditutup.
isOpenRight ()	/	Boolean	Mengembalikan nilai benar jika menu sisi kanan terbuka, salah jika ditutup.
getScrollPosition ()	/	/	Mengembalikan objek dengan dua angka sebagai properti: left dan right. Angka-angka ini mewakili jarak yang telah digulir pengguna dari kiri dan atas masing-masing.
canDragContent (parameter1)	canDrag	Boolean	Apakah konten dapat ditarik ke menu samping terbuka.
edgeDragThreshold (parameter1)	nilai	Boolean | nomor	Jika nilainya true, menu samping dapat dibuka dengan menyeret 25px dari tepi layar. Jika salah, menyeret dinonaktifkan. Kita dapat mengatur angka apa pun yang akan mewakili nilai piksel dari tepi kiri dan kanan layar.
$ getByHandle (parameter1)	menangani	tali	Digunakan untuk menghubungkan metode ke tampilan menu samping tertentu dengan pegangan yang sama. $ionicSideMenuDelegate. $getByHandle('my-handle').toggleLeft();