Winkelmaterial - SideNav

Das md-sidenavEine Angular-Direktive wird verwendet, um eine Containerkomponente anzuzeigen, die programmgesteuert angezeigt oder ausgeblendet werden kann. Es wird standardmäßig über den Hauptinhaltsbereich verschoben.

Attribute

In der folgenden Tabelle sind die Parameter und die Beschreibung der verschiedenen Attribute von aufgeführt md-sidenav

Sr.Nr.	Parameter & Beschreibung
1	md-is-open Ein Modell, das daran gebunden ist, ob das Sidav geöffnet ist.
2	md-component-id componentId zur Verwendung mit dem Dienst $ mdSidenav.
3	md-is-locked-open Wenn sich dieser Ausdruck als wahr herausstellt, wird das Sidenav „geöffnet“: Es fällt in den Fluss des Inhalts, anstatt darüber zu erscheinen. Dies überschreibt das Attribut is-open. Der Dienst $ mdMedia () ist dem Attribut is-Locked-Open ausgesetzt, dem eine Medienabfrage oder eine der Voreinstellungen sm, gt-sm, md, gt-md, lg oder gt-lg zugewiesen werden kann. Examples - - `<md-sidenav md-is-locked-open = "shouldLockOpen"></md-sidenav> <md-sidenav md-is-locked-open = "$mdMedia('min-width: 1000px')"></mdsidenav> <md-sidenav md-is-locked-open = "$mdMedia('sm')"></md-sidenav> <!--(locks open on small screens)-->`

Beispiel

Das folgende Beispiel zeigt die Verwendung von md-sidenav und auch die Verwendung der sidenav Komponente.

am_sidenav.htm

<html lang = "en">
   <head>
      <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('sideNavController', sideNavController);

         function sideNavController ($scope, $mdSidenav) {
            $scope.openLeftMenu = function() {
               $mdSidenav('left').toggle();
            };
             
            $scope.openRightMenu = function() {
               $mdSidenav('right').toggle();
            };
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <div id = "sideNavContainer" ng-controller = "sideNavController as ctrl"
         layout = "row" ng-cloak>
         <md-sidenav md-component-id = "left" class = "md-sidenav-left">
            Welcome to TutorialsPoint.Com</md-sidenav>
         
         <md-content>           
            <md-button ng-click = "openLeftMenu()">Open Left Menu</md-button>
            <md-button ng-click = "openRightMenu()">Open Right Menu</md-button>
         </md-content>
         
         <md-sidenav md-component-id = "right" class = "md-sidenav-right">
            <md-button href = "http://google.com">Google</md-button>
         </md-sidenav>
      </div>
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.