Açısal Malzeme - SideNav

md-sidenavProgram aracılığıyla gösterilebilen veya gizlenebilen bir kap bileşenini göstermek için bir Angular yönergesi kullanılır. Varsayılan olarak ana içerik bölgesinin üstünden dışarı kayar.

Öznitellikler

Aşağıdaki tablo, farklı özniteliklerin parametrelerini ve açıklamalarını listeler. md-sidenav

Sr.No	Parametre ve Açıklama
1	md-is-open Sidenavın açılıp açılmadığına bağlı bir model.
2	md-component-id $ mdSidenav hizmetiyle kullanılacak componentId.
3	md-is-locked-open Bu ifade doğru olarak değerlendirildiğinde, sidenav 'kilitlenir': üzerinde görünmek yerine içeriğin akışına düşer. Bu, is-open özniteliğini geçersiz kılar. $ MdMedia () hizmeti, bir medya sorgusu veya sm, gt-sm, md, gt-md, lg veya gt-lg ön ayarlarından biri verilebilen is-locked-open özniteliğine maruz kalır. 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)-->`

Misal

Aşağıdaki örnek, md-sidenav ve ayrıca sidenav bileşen.

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>

Sonuç

Sonucu doğrulayın.