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