Учебники

Угловой материал — SideNav

Декабрь 8, 2018

Md-sidenav , директива Angular, используется для отображения компонента контейнера, который можно показать или скрыть программно. По умолчанию он выдвигается поверх основной области содержимого.

Атрибуты

В следующей таблице перечислены параметры и описание различных атрибутов md-sidenav.

Sr.No Параметр и описание
1

мкр-это открытый

Модель, привязанная к тому, открыт ли sidenav.

2

мкр-компонент-идентификатор

componentId для использования со службой $ mdSidenav.

3

мкр-это автоподстройки открытым

Когда это выражение принимает значение true, sidenav «блокируется»: оно попадает в поток контента, а не появляется поверх него. Это переопределяет атрибут is-open. Служба $ mdMedia () работает с атрибутом is-locked-open, который может быть задан медиа-запросом или одним из предустановок sm, gt-sm, md, gt-md, lg или gt-lg.

Примеры — 

<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)-->

мкр-это открытый

Модель, привязанная к тому, открыт ли sidenav.

мкр-компонент-идентификатор

componentId для использования со службой $ mdSidenav.

мкр-это автоподстройки открытым

Когда это выражение принимает значение true, sidenav «блокируется»: оно попадает в поток контента, а не появляется поверх него. Это переопределяет атрибут is-open. Служба $ mdMedia () работает с атрибутом is-locked-open, который может быть задан медиа-запросом или одним из предустановок sm, gt-sm, md, gt-md, lg или gt-lg.

Примеры —

пример

В следующем примере показано использование md-sidenav, а также использование компонента sidenav .

am_sidenav.htm

Live Demo 

<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>

Результат

Проверьте результат.

51
Share: