menu latéral ionique
Un élément conteneur contient le menu latéral et le contenu principal. La principale zone de contenu en faisant glisser d'un côté à l'autre pour rendre le côté gauche ou à droite de la barre de menu pour passer.
Rendus sont les suivantes:
usage
Pour utiliser le menu latéral, ajouter un élément parent <ion-side-menus>, une teneur intermédiaire <ion côté-menu-contenu>, et un ou plusieurs <ion-menu latéral> commande.
<ion-side-menus> <!-- 中间内容 --> <ion-side-menu-content ng-controller="ContentController"> </ion-side-menu-content> <!-- 左侧菜单 --> <ion-side-menu side="left"> </ion-side-menu> <!-- 右侧菜单 --> <ion-side-menu side="right"> </ion-side-menu> </ion-side-menus>
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
API
| propriété | type | détail |
|---|---|---|
| enable-menu avec back-vues (Facultatif) | 布尔值 | Dans l'affichage du bouton de retour, confirmer si vous souhaitez activer le menu latéral. |
| délégué poignée | chaîne | La poignée est utilisée pour faire défiler l'affichage de l'identité avec $ ionicScrollDelegate. |
ion côté-menu-contenu
Un contenu visible du corps du récipient, un frère ou plusieurs instructions ionSideMenu.
usage
<ion-side-menu-content drag-content="true"> </ion-side-menu-content>
API
| propriété | type | détail |
|---|---|---|
| glisser-contenu (Facultatif) | 布尔值 | Que le contenu peut être traîné. La valeur par défaut est vrai. |
ions côté menu
Menu Sidebar d'un conteneur, un frère de l'ion-side-menu contenu instruction.
usage
<ion-side-menu side="left" width="myWidthValue + 20" is-enabled="shouldLeftSideMenuBeEnabled()"> </ion-side-menu>
API
| propriété | type | détail |
|---|---|---|
| côté | 字符串 | Menu Sidebar actuellement des côtés. Les valeurs optionnelles sont: «gauche» ou «droite». |
| est-enabled (Facultatif) | 布尔值 | Le menu latéral est disponible. |
| largeur (Facultatif) | 数值 | Menu Sidebar devrait être le nombre de pixels de large. La valeur par défaut est de 275. |
Menu-toggle
Dans une barre latérale spécifiée Menu de commutation.
usage
Voici un exemple d'un lien dans la barre de navigation. En cliquant sur ce lien ouvrira automatiquement un menu latéral spécifié.
<ion-view> <ion-nav-buttons side="left"> <button menu-toggle="left" class="button button-icon icon ion-navicon"></button> </ion-nav-buttons> ... </ion-view>
Menu-close
Fermez le menu latéral actuellement ouvert.
usage
Voici un exemple d'un lien dans la barre de navigation. En cliquant sur ce lien ouvrira automatiquement un menu latéral spécifié.
<a menu-close href="#/home" class="item">首页</a>
$ IonicSideMenuDelegate
Cette méthode déclenche directement le service $ ionicSideMenuDelegate, pour contrôler tout le menu latéral. Contrôle ionSideMenus Cas particulier avec les méthodes $ getByHandle.
usage
<body ng-controller="MainCtrl">
<ion-side-menus>
<ion-side-menu-content>
内容!
<button ng-click="toggleLeftSideMenu()">
切换左侧侧栏菜单
</button>
</ion-side-menu-content>
<ion-side-menu side="left">
左侧菜单!
<ion-side-menu>
</ion-side-menus>
</body>
function MainCtrl($scope, $ionicSideMenuDelegate) {
$scope.toggleLeftSideMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
manière
toggleLeft([isOpen])
Mettez la barre de menu sur le côté gauche (si elle existe).
| Paramètres | type | détail |
|---|---|---|
| isOpen (Facultatif) | 布尔值 | Que ce soit pour ouvrir ou fermer le menu. Par défaut: Menu de commutation. |
toggleRight([isOpen])
Mettre sur le côté droit de la barre de menu (si elle existe).
| Paramètres | type | détail |
|---|---|---|
| isOpen (Facultatif) | 布尔值 | Que ce soit pour ouvrir ou fermer le menu. Par défaut: Menu de commutation. |
getOpenRatio()
Obtenir proportion Ouvrez le menu est au-delà de la largeur du menu. Par exemple, un menu de 100px de largeur est une largeur de 50px rapport d'ouverture de 50%, le ratio sera de retour une valeur de 0,5.
Valeur de retour:0 représentation en virgule flottante n'a pas été ouvert, si le côté gauche du menu est ouvert ou ouvrent à 0-1, si le côté droit du menu est ouvert ou ouvrent 0 à -1.
isOpen()
Valeur de retour: valeur booléenne détermine si le côté gauche ou à droite du menu est déjà ouvert.
isOpenLeft()
Valeur de retour: valeurs booléennes dans le menu de gauche a été ouvert.
isOpenRight()
Valeur de retour:valeur booléenne si le côté droit du menu est déjà ouvert.
canDragContent([canDrag])
| Paramètres | type | détail |
|---|---|---|
| canDrag (Facultatif) | 布尔值 | Vous pouvez faire glisser le contenu est défini pour ouvrir le menu de la barre latérale. |
Valeur de retour: booléen si le contenu peut être glissé ouvert le menu latéral.
$getByHandle(handle)
| Paramètres | type | détail |
|---|---|---|
| poignée | 字符串 |
Par exemple:
$ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();