2 * Angular Material Design
3 * https://github.com/angular/material
7 (function( window, angular, undefined ){
12 * @name material.components.subheader
16 * Subheaders are special list tiles that delineate distinct sections of a
17 * list or grid list and are typically related to the current filtering or
18 * sorting criteria. Subheader tiles are either displayed inline with tiles or
19 * can be associated with content, for example, in an adjacent column.
21 * Upon scrolling, subheaders remain pinned to the top of the screen and remain
22 * pinned until pushed on or off screen by the next subheader. @see [Material
23 * Design Specifications](https://www.google.com/design/spec/components/subheaders.html)
25 * > To improve the visual grouping of content, use the system color for your subheaders.
28 angular.module('material.components.subheader', [
30 'material.components.sticky'
32 .directive('mdSubheader', MdSubheaderDirective);
37 * @module material.components.subheader
42 * The `<md-subheader>` directive is a subheader for a section. By default it is sticky.
43 * You can make it not sticky by applying the `md-no-sticky` class to the subheader.
48 * <md-subheader>Online Friends</md-subheader>
52 function MdSubheaderDirective($mdSticky, $compile, $mdTheming) {
58 '<h2 class="md-subheader">' +
59 '<div class="md-subheader-inner">' +
60 '<span class="md-subheader-content"></span>' +
63 compile: function(element, attr, transclude) {
64 return function postLink(scope, element, attr) {
66 var outerHTML = element[0].outerHTML;
68 function getContent(el) {
69 return angular.element(el[0].querySelector('.md-subheader-content'));
72 // Transclude the user-given contents of the subheader
73 // the conventional way.
74 transclude(scope, function(clone) {
75 getContent(element).append(clone);
78 // Create another clone, that uses the outer and inner contents
79 // of the element, that will be 'stickied' as the user scrolls.
80 if (!element.hasClass('md-no-sticky')) {
81 transclude(scope, function(clone) {
82 var stickyClone = $compile(angular.element(outerHTML))(scope);
83 getContent(stickyClone).append(clone);
84 $mdSticky(scope, element, stickyClone);
91 MdSubheaderDirective.$inject = ["$mdSticky", "$compile", "$mdTheming"];
93 })(window, window.angular);