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