The
am_subheaders.htm
md-subheader, an Angular directives is used to show a subheader for a section.Example
The following example showcases the use ofmd-subheader showcase uses of subheader component.am_subheaders.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('subheaderController', subheaderController); function subheaderController ($scope) { $scope.fruitNames = ['Apple', 'Banana', 'Orange']; $scope.vegNames = ['Carrot', 'Potato', 'Cabbage']; $scope.eateries = ['Milk', 'Bread']; } </script> </head> <body ng-app="firstApplication"> <div id="subheaderContainer" ng-controller="subheaderController as ctrl" layout="column" flex layout-fill ng-cloak> <md-toolbar md-scroll-shrink> <div class="md-toolbar-tools">Items</div> </md-toolbar> <md-content style="height: 600px;"> <section> <md-subheader class="md-primary">Fruits</md-subheader> <md-list layout-padding> <md-list-item ng-repeat="fruits in fruitNames"> <div> <p>{{fruits}}</p> </div> </md-list-item> </md-list> </section> <section> <md-subheader class="md-warn">Vegetables</md-subheader> <md-list layout-padding> <md-list-item ng-repeat="veg in vegNames"> <div> <p>{{veg}}</p> </div> </md-list-item> </md-list> </section> <section> <md-subheader>Eateries</md-subheader> <md-list layout-padding> <md-list-item ng-repeat="eatery in eateries"> <div> <p>{{eatery}}</p> </div> </md-list-item> </md-list> </section> </md-content> </div> </body> </html>
No comments:
Post a Comment