Ionic - Menu laterale JavaScript

Il menu laterale è uno dei componenti ionici più utilizzati. Il menu laterale può essere aperto scorrendo verso sinistra o destra o attivando il pulsante creato a tale scopo.

Utilizzo del menu laterale

Il primo elemento di cui abbiamo bisogno è ion-side-menus. Questo elemento viene utilizzato per collegare il menu laterale con tutte le schermate che lo utilizzeranno. Ilion-side-menu-content l'elemento è dove verrà posizionato il contenuto e il file ion-side-menu elemento è il luogo in cui possiamo mettere un file sidedirettiva. Aggiungeremo il menu laterale al fileindex.html e posiziona il file ion-nav-viewall'interno del contenuto del menu laterale. In questo modo il menu laterale può essere utilizzato in tutta l'app.

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>

Ora creeremo il pulsante with menu-toggle = "left"direttiva. Questo pulsante verrà solitamente posizionato nella barra delle intestazioni delle app, ma lo aggiungeremo nel nostro file modello per una migliore comprensione.

Quando si tocca il pulsante o quando si scorre verso destra, si apre il menu laterale. Puoi anche impostare il filemenu-close direttiva, se desideri avere un solo pulsante per chiudere il menu laterale, ma useremo il pulsante di attivazione / disattivazione per questo.

Modello HTML

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

Il codice precedente produrrà la seguente schermata:

Puoi aggiungere alcuni attributi aggiuntivi al file ion-side-menuselemento. Ilenable-menu-with-back-viewspuò essere impostato su false per disabilitare il menu laterale, quando viene visualizzato il pulsante Indietro. Questo nasconderà anche il filemenu-togglepulsante dall'intestazione. L'altro attributo èdelegate-handle, che verrà utilizzato per la connessione con $ionicSideMenuDelegate.

Il ion-side-menu-contentl'elemento può utilizzare il proprio attributo. Quando ildrag-contentl'attributo è impostato su false, disabiliterà la possibilità di aprire il menu laterale scorrendo la schermata del contenuto. Iledge-drag-thresholdl'attributo ha un valore predefinito di 25. Ciò significa che lo scorrimento è consentito solo a 25 pixel dal bordo sinistro e destro dello schermo. Possiamo modificare questo valore numerico o impostarlo sufalse per abilitare lo scorrimento sull'intero schermo o true per disabilitarlo.

Il ion-side-menu può usare il sideattributo che abbiamo mostrato nell'esempio sopra. Determinerà se il menu deve apparire dal lato sinistro o destro. Il‘is-enabled’ l'attributo con un valore falso disabiliterà il menu laterale e il widthil valore dell'attributo è un numero che rappresenta l'ampiezza del menu laterale. Il valore predefinito è 275.

Delegato del menu laterale

Il $ionicSideMenuDelegateè un servizio utilizzato per controllare tutti i menu laterali nell'app. Ti mostreremo come usarlo e poi esamineremo tutte le opzioni disponibili. Come tutti i servizi Ionic, dobbiamo aggiungerlo come dipendenza al nostro controller e quindi usarlo all'interno dell'ambito del controller. Ora, quando facciamo clic sul pulsante, si apriranno tutti i menu laterali.

Codice controller

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

Codice HTML

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

La tabella seguente mostra il file $ionicScrollDelegate metodi.

Metodi delegati

Metodo	Parametri	genere	Dettagli
toggleLeft (parametro)	è aperto	Booleano	Utilizzato per aprire o chiudere il menu laterale.
toggleRight (parametro)	è aperto	Booleano	Utilizzato per aprire o chiudere il menu laterale.
getOpenRatio ()	/	/	Restituisce il rapporto tra la parte aperta e la larghezza del menu. Se metà del menu è aperta da sinistra, la razione sarà 0,5. Se il menu laterale è chiuso, restituirà 0. Se metà del menu è aperta dal lato destro, restituirà -0.5.
è aperto()	/	Booleano	Restituisce vero se il menu laterale è aperto, falso se è chiuso.
isOpenLeft ()	/	Booleano	Restituisce vero se il menu a sinistra è aperto, falso se è chiuso.
isOpenRight ()	/	Booleano	Restituisce vero se il menu a destra è aperto, falso se è chiuso.
getScrollPosition ()	/	/	Restituisce un oggetto con due numeri come proprietà: left e right. Questi numeri rappresentano la distanza percorsa dall'utente rispettivamente da sinistra e dall'alto.
canDragContent (parametro1)	canDrag	Booleano	Se il contenuto può essere trascinato per aprire il menu laterale.
edgeDragThreshold (parametro1)	valore	Booleano | numero	Se il valore è true, il menu laterale può essere aperto trascinando 25px dai bordi dello schermo. Se è falso, il trascinamento è disabilitato. Possiamo impostare qualsiasi numero che rappresenterà il valore dei pixel dal bordo sinistro e destro dello schermo.
$ getByHandle (parametro1)	maniglia	corda	Utilizzato per collegare i metodi alla vista del menu laterale particolare con la stessa maniglia. $ionicSideMenuDelegate. $getByHandle('my-handle').toggleLeft();