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