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.

97 lines
2.6 KiB

7 years ago
  1. /*!
  2. * Angular Material Design
  3. * https://github.com/angular/material
  4. * @license MIT
  5. * v1.1.3
  6. */
  7. (function( window, angular, undefined ){
  8. "use strict";
  9. /**
  10. * @ngdoc module
  11. * @name material.components.truncate
  12. */
  13. MdTruncateController['$inject'] = ["$element"];
  14. angular.module('material.components.truncate', ['material.core'])
  15. .directive('mdTruncate', MdTruncateDirective);
  16. /**
  17. * @ngdoc directive
  18. * @name mdTruncate
  19. * @module material.components.truncate
  20. * @restrict AE
  21. * @description
  22. *
  23. * The `md-truncate` component displays a label that will automatically clip text which is wider
  24. * than the component. By default, it displays an ellipsis, but you may apply the `md-clip` CSS
  25. * class to override this default and use a standard "clipping" approach.
  26. *
  27. * <i><b>Note:</b> The `md-truncate` component does not automatically adjust it's width. You must
  28. * provide the `flex` attribute, or some other CSS-based width management. See the
  29. * <a ng-href="./demo/truncate">demos</a> for examples.</i>
  30. *
  31. * @usage
  32. *
  33. * ### As an Element
  34. *
  35. * <hljs lang="html">
  36. * <div layout="row">
  37. * <md-button>Back</md-button>
  38. *
  39. * <md-truncate flex>Chapter 1 - The Way of the Old West</md-truncate>
  40. *
  41. * <md-button>Forward</md-button>
  42. * </div>
  43. * </hljs>
  44. *
  45. * ### As an Attribute
  46. *
  47. * <hljs lang="html">
  48. * <h2 md-truncate style="max-width: 100px;">Some Title With a Lot of Text</h2>
  49. * </hljs>
  50. *
  51. * ## CSS & Styles
  52. *
  53. * `<md-truncate>` provides two CSS classes that you may use to control the type of clipping.
  54. *
  55. * <i><b>Note:</b> The `md-truncate` also applies a setting of `width: 0;` when used with the `flex`
  56. * attribute to fix an issue with the flex element not shrinking properly.</i>
  57. *
  58. * <div>
  59. * <docs-css-api-table>
  60. *
  61. * <docs-css-selector code=".md-ellipsis">
  62. * Assigns the "ellipsis" behavior (default) which will cut off mid-word and append an ellipsis
  63. * (&hellip;) to the end of the text.
  64. * </docs-css-selector>
  65. *
  66. * <docs-css-selector code=".md-clip">
  67. * Assigns the "clipping" behavior which will simply chop off the text. This may happen
  68. * mid-word or even mid-character.
  69. * </docs-css-selector>
  70. *
  71. * </docs-css-api-table>
  72. * </div>
  73. */
  74. function MdTruncateDirective() {
  75. return {
  76. restrict: 'AE',
  77. controller: MdTruncateController,
  78. controllerAs: '$ctrl',
  79. bindToController: true
  80. }
  81. }
  82. /**
  83. * Controller for the <md-truncate> component.
  84. *
  85. * @param $element The md-truncate element.
  86. *
  87. * @constructor
  88. * ngInject
  89. */
  90. function MdTruncateController($element) {
  91. $element.addClass('md-truncate');
  92. }
  93. })(window, window.angular);