You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

141 lines
4.5 KiB

7 years ago
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v1.1.3
  6. */
  7. goog.provide('ngmaterial.components.card');
  8. goog.require('ngmaterial.core');
  9. /**
  10. * @ngdoc module
  11. * @name material.components.card
  12. *
  13. * @description
  14. * Card components.
  15. */
  16. mdCardDirective['$inject'] = ["$mdTheming"];
  17. angular.module('material.components.card', [
  18. 'material.core'
  19. ])
  20. .directive('mdCard', mdCardDirective);
  21. /**
  22. * @ngdoc directive
  23. * @name mdCard
  24. * @module material.components.card
  25. *
  26. * @restrict E
  27. *
  28. * @description
  29. * The `<md-card>` directive is a container element used within `<md-content>` containers.
  30. *
  31. * An image included as a direct descendant will fill the card's width. If you want to avoid this,
  32. * you can add the `md-image-no-fill` class to the parent element. The `<md-card-content>`
  33. * container will wrap text content and provide padding. An `<md-card-footer>` element can be
  34. * optionally included to put content flush against the bottom edge of the card.
  35. *
  36. * Action buttons can be included in an `<md-card-actions>` element, similar to `<md-dialog-actions>`.
  37. * You can then position buttons using layout attributes.
  38. *
  39. * Card is built with:
  40. * * `<md-card-header>` - Header for the card, holds avatar, text and squared image
  41. * - `<md-card-avatar>` - Card avatar
  42. * - `md-user-avatar` - Class for user image
  43. * - `<md-icon>`
  44. * - `<md-card-header-text>` - Contains elements for the card description
  45. * - `md-title` - Class for the card title
  46. * - `md-subhead` - Class for the card sub header
  47. * * `<img>` - Image for the card
  48. * * `<md-card-title>` - Card content title
  49. * - `<md-card-title-text>`
  50. * - `md-headline` - Class for the card content title
  51. * - `md-subhead` - Class for the card content sub header
  52. * - `<md-card-title-media>` - Squared image within the title
  53. * - `md-media-sm` - Class for small image
  54. * - `md-media-md` - Class for medium image
  55. * - `md-media-lg` - Class for large image
  56. * - `md-media-xl` - Class for extra large image
  57. * * `<md-card-content>` - Card content
  58. * * `<md-card-actions>` - Card actions
  59. * - `<md-card-icon-actions>` - Icon actions
  60. *
  61. * Cards have constant width and variable heights; where the maximum height is limited to what can
  62. * fit within a single view on a platform, but it can temporarily expand as needed.
  63. *
  64. * @usage
  65. * ### Card with optional footer
  66. * <hljs lang="html">
  67. * <md-card>
  68. * <img src="card-image.png" class="md-card-image" alt="image caption">
  69. * <md-card-content>
  70. * <h2>Card headline</h2>
  71. * <p>Card content</p>
  72. * </md-card-content>
  73. * <md-card-footer>
  74. * Card footer
  75. * </md-card-footer>
  76. * </md-card>
  77. * </hljs>
  78. *
  79. * ### Card with actions
  80. * <hljs lang="html">
  81. * <md-card>
  82. * <img src="card-image.png" class="md-card-image" alt="image caption">
  83. * <md-card-content>
  84. * <h2>Card headline</h2>
  85. * <p>Card content</p>
  86. * </md-card-content>
  87. * <md-card-actions layout="row" layout-align="end center">
  88. * <md-button>Action 1</md-button>
  89. * <md-button>Action 2</md-button>
  90. * </md-card-actions>
  91. * </md-card>
  92. * </hljs>
  93. *
  94. * ### Card with header, image, title actions and content
  95. * <hljs lang="html">
  96. * <md-card>
  97. * <md-card-header>
  98. * <md-card-avatar>
  99. * <img class="md-user-avatar" src="avatar.png"/>
  100. * </md-card-avatar>
  101. * <md-card-header-text>
  102. * <span class="md-title">Title</span>
  103. * <span class="md-subhead">Sub header</span>
  104. * </md-card-header-text>
  105. * </md-card-header>
  106. * <img ng-src="card-image.png" class="md-card-image" alt="image caption">
  107. * <md-card-title>
  108. * <md-card-title-text>
  109. * <span class="md-headline">Card headline</span>
  110. * <span class="md-subhead">Card subheader</span>
  111. * </md-card-title-text>
  112. * </md-card-title>
  113. * <md-card-actions layout="row" layout-align="start center">
  114. * <md-button>Action 1</md-button>
  115. * <md-button>Action 2</md-button>
  116. * <md-card-icon-actions>
  117. * <md-button class="md-icon-button" aria-label="icon">
  118. * <md-icon md-svg-icon="icon"></md-icon>
  119. * </md-button>
  120. * </md-card-icon-actions>
  121. * </md-card-actions>
  122. * <md-card-content>
  123. * <p>
  124. * Card content
  125. * </p>
  126. * </md-card-content>
  127. * </md-card>
  128. * </hljs>
  129. */
  130. function mdCardDirective($mdTheming) {
  131. return {
  132. restrict: 'E',
  133. link: function ($scope, $element, attr) {
  134. $element.addClass('_md'); // private md component indicator for styling
  135. $mdTheming($element);
  136. }
  137. };
  138. }
  139. ngmaterial.components.card = angular.module("material.components.card");