source: trip-planner-front/node_modules/angular-material/modules/js/card/card.js@ 6a3a178

Last change on this file since 6a3a178 was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

  • Property mode set to 100644
File size: 4.4 KB
Line 
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 */
17mdCardDirective['$inject'] = ["$mdTheming"];
18angular.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 */
133function 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);
Note: See TracBrowser for help on using the repository browser.