English 中文(简体)
Angular Material Tutorial

Selected Reading

Angular Material - Subheaders
  • 时间：2024-09-17

Angular Material - Subheaders

Previous Page Next Page  

The md-subheader, an Angular directive, is used to show a subheader for a section.

Example

The following example shows the use of md-subheader and also the uses of subheader component.

am_subheaders.htm

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

         function subheaderController ($scope) {
            $scope.fruitNames = [ Apple ,  Banana ,  Orange ];
            $scope.vegNames = [ Carrot ,  Potato ,  Cabbage ];
            $scope.eateries = [ Milk ,  Bread ];
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApppcation"> 
      <span id = "subheaderContainer" ng-controller = "subheaderController as ctrl"
         layout = "column" flex layout-fill ng-cloak>
         <md-toolbar md-scroll-shrink>
            <span class = "md-toolbar-tools">Items</span>
         </md-toolbar>
         
         <md-content style = "height: 600px;">
            <section>
               <md-subheader class = "md-primary">Fruits</md-subheader>
               <md-pst layout-padding>
                  <md-pst-item ng-repeat = "fruits in fruitNames">
                     <span>
                        <p>{{fruits}}</p>
                     </span>
                  </md-pst-item>
               </md-pst>
            </section>
               
            <section>
               <md-subheader class = "md-warn">Vegetables</md-subheader>
               <md-pst layout-padding>
                  <md-pst-item ng-repeat = "veg in vegNames">
                     <span>
                        <p>{{veg}}</p>
                     </span>
                  </md-pst-item>
               </md-pst>
            </section>
               
            <section>
               <md-subheader>Eateries</md-subheader>
               <md-pst layout-padding>
                  <md-pst-item ng-repeat = "eatery in eateries">
                     <span>
                        <p>{{eatery}}</p>
                     </span>
                  </md-pst-item>
               </md-pst>
            </section>
         </md-content>
         
      </span>
   </body>
</html>

Result

Verify the result.