각도 재질-SideNav

그만큼 md-sidenav, Angular 지시문은 프로그래밍 방식으로 표시하거나 숨길 수있는 컨테이너 구성 요소를 표시하는 데 사용됩니다. 기본적으로 기본 콘텐츠 영역의 맨 위로 슬라이드됩니다.

속성

다음 표는 다양한 속성에 대한 매개 변수 및 설명을 나열합니다. md-sidenav

Sr. 아니요	매개 변수 및 설명
1	md-is-open 사이드 내비게이션이 열려 있는지 여부에 바인딩 된 모델입니다.
2	md-component-id $ mdSidenav 서비스와 함께 사용할 componentId입니다.
삼	md-is-locked-open 이 표현식이 true로 평가되면 사이드 내비게이션이 '잠금'열립니다. 콘텐츠 위에 표시되는 대신 콘텐츠의 흐름에 빠집니다. 이것은 is-open 속성을 대체합니다. $ mdMedia () 서비스는 미디어 쿼리 또는 sm, gt-sm, md, gt-md, lg 또는 gt-lg 사전 설정 중 하나에 제공 될 수있는 is-locked-open 속성에 노출됩니다. 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)-->`

예

다음 예는 md-sidenav 또한 사용 sidenav 구성 요소.

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>

결과

결과를 확인하십시오.