card.js 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v0.11.4
  6. */
  7. (function( window, angular, undefined ){
  8. "use strict";
  9. /**
  10. * @ngdoc module
  11. * @name material.components.card
  12. *
  13. * @description
  14. * Card components.
  15. */
  16. angular.module('material.components.card', [
  17. 'material.core'
  18. ])
  19. .directive('mdCard', mdCardDirective);
  20. /**
  21. * @ngdoc directive
  22. * @name mdCard
  23. * @module material.components.card
  24. *
  25. * @restrict E
  26. *
  27. * @description
  28. * The `<md-card>` directive is a container element used within `<md-content>` containers.
  29. *
  30. * An image included as a direct descendant will fill the card's width, while the `<md-card-content>`
  31. * container will wrap text content and provide padding. An `<md-card-footer>` element can be
  32. * optionally included to put content flush against the bottom edge of the card.
  33. *
  34. * Action buttons can be included in an element with the `.md-actions` class, also used in `md-dialog`.
  35. * You can then position buttons using layout attributes.
  36. *
  37. * Cards have constant width and variable heights; where the maximum height is limited to what can
  38. * fit within a single view on a platform, but it can temporarily expand as needed.
  39. *
  40. * @usage
  41. * ### Card with optional footer
  42. * <hljs lang="html">
  43. * <md-card>
  44. * <img src="card-image.png" class="md-card-image" alt="image caption">
  45. * <md-card-content>
  46. * <h2>Card headline</h2>
  47. * <p>Card content</p>
  48. * </md-card-content>
  49. * <md-card-footer>
  50. * Card footer
  51. * </md-card-footer>
  52. * </md-card>
  53. * </hljs>
  54. *
  55. * ### Card with actions
  56. * <hljs lang="html">
  57. * <md-card>
  58. * <img src="card-image.png" class="md-card-image" alt="image caption">
  59. * <md-card-content>
  60. * <h2>Card headline</h2>
  61. * <p>Card content</p>
  62. * </md-card-content>
  63. * <div class="md-actions" layout="row" layout-align="end center">
  64. * <md-button>Action 1</md-button>
  65. * <md-button>Action 2</md-button>
  66. * </div>
  67. * </md-card>
  68. * </hljs>
  69. *
  70. */
  71. function mdCardDirective($mdTheming) {
  72. return {
  73. restrict: 'E',
  74. link: function($scope, $element, $attr) {
  75. $mdTheming($element);
  76. }
  77. };
  78. }
  79. mdCardDirective.$inject = ["$mdTheming"];
  80. })(window, window.angular);