Vật liệu góc - SideNav

Các md-sidenav, một chỉ thị Angular được sử dụng để hiển thị một thành phần vùng chứa có thể được hiển thị hoặc ẩn theo chương trình. Theo mặc định, nó sẽ trượt ra phía trên cùng của vùng nội dung chính.

Thuộc tính

Bảng sau liệt kê các tham số và mô tả về các thuộc tính khác nhau của md-sidenav

Sr.No	Mô tả về Thông Số
1	md-is-open Mô hình liên kết với việc sidenav có được mở hay không.
2	md-component-id componentId để sử dụng với dịch vụ $ mdSidenav.
3	md-is-locked-open Khi biểu thức này đánh giá là true, sidenav 'khóa mở': nó nằm trong luồng nội dung thay vì xuất hiện trên đó. Điều này ghi đè thuộc tính is-open. Dịch vụ $ mdMedia () tiếp xúc với thuộc tính is-lock-open, có thể được cung cấp một truy vấn phương tiện hoặc một trong các giá trị đặt trước sm, gt-sm, md, gt-md, lg hoặc gt-lg. 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)-->`

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng md-sidenav và cả việc sử dụng sidenav thành phần.

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>

Kết quả

Xác minh kết quả.