Angular Material Subheader
home
Run
screen_rotation
fullscreen
cloud_download
<html lang="en" > <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <script language="javascript"> angular .module('myApp', ['ngMaterial', 'ngMessages']) .controller('MyController', function ($scope, $mdDialog) { //controller code goes here... }); </script> </head> <body ng-app="myApp"> <div ng-controller="MyController" ng-cloak="" > <md-toolbar md-scroll-shrink> <div class="md-toolbar-tools">My Inbox</div> </md-toolbar> <md-content layout-padding style="height: 300px;"> <section> <md-subheader class="md-primary">My Messages</md-subheader> <md-list flex> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 1</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 2</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 3</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 4</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 5</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> </md-list> </section> <section> <md-subheader class="md-warn">Another Messages</md-subheader> <md-list flex> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 1</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 2</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 3</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 4</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 5</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> </md-list> </section> </md-content> </div> </body> </html>
<html lang="en" > <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <script language="javascript"> angular .module('myApp', ['ngMaterial', 'ngMessages']) .controller('MyController', function ($scope, $mdDialog) { //controller code goes here... }); </script> </head> <body ng-app="myApp"> <div ng-controller="MyController" ng-cloak="" > <md-toolbar md-scroll-shrink> <div class="md-toolbar-tools">My Inbox</div> </md-toolbar> <md-content layout-padding style="height: 300px;"> <section> <md-subheader class="md-primary">My Messages</md-subheader> <md-list flex> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 1</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 2</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 3</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 4</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 5</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> </md-list> </section> <section> <md-subheader class="md-warn">Another Messages</md-subheader> <md-list flex> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 1</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 2</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 3</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 4</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> <md-list-item class="md-3-line" ng-click="null" > <img ng-src="http://tutorialsplane.com/wp-content/uploads/2016/09/profile.jpg" class="md-avatar"> <div class="md-list-item-text"> <h3>Item Title 5</h3> <h4>Sub Heading..</h4> <p>Dummy description......</p> </div> </md-list-item> </md-list> </section> </md-content> </div> </body> </html>
Copyrights@tutorialsplane.com