| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- /*!
- * AngularJS Material Design
- * https://github.com/angular/material
- * @license MIT
- * v1.1.8-master-aba7b2b
- */
- goog.provide('ngmaterial.components.card');
- goog.require('ngmaterial.core');
- /**
- * @ngdoc module
- * @name material.components.card
- *
- * @description
- * Card components.
- */
- mdCardDirective['$inject'] = ["$mdTheming"];
- angular.module('material.components.card', [
- 'material.core'
- ])
- .directive('mdCard', mdCardDirective);
- /**
- * @ngdoc directive
- * @name mdCard
- * @module material.components.card
- *
- * @restrict E
- *
- * @description
- * The `<md-card>` directive is a container element used within `<md-content>` containers.
- *
- * An image included as a direct descendant will fill the card's width. If you want to avoid this,
- * you can add the `md-image-no-fill` class to the parent element. The `<md-card-content>`
- * container will wrap text content and provide padding. An `<md-card-footer>` element can be
- * optionally included to put content flush against the bottom edge of the card.
- *
- * Action buttons can be included in an `<md-card-actions>` element, similar to `<md-dialog-actions>`.
- * You can then position buttons using layout attributes.
- *
- * Card is built with:
- * * `<md-card-header>` - Header for the card, holds avatar, text and squared image
- * - `<md-card-avatar>` - Card avatar
- * - `md-user-avatar` - Class for user image
- * - `<md-icon>`
- * - `<md-card-header-text>` - Contains elements for the card description
- * - `md-title` - Class for the card title
- * - `md-subhead` - Class for the card sub header
- * * `<img>` - Image for the card
- * * `<md-card-title>` - Card content title
- * - `<md-card-title-text>`
- * - `md-headline` - Class for the card content title
- * - `md-subhead` - Class for the card content sub header
- * - `<md-card-title-media>` - Squared image within the title
- * - `md-media-sm` - Class for small image
- * - `md-media-md` - Class for medium image
- * - `md-media-lg` - Class for large image
- * - `md-media-xl` - Class for extra large image
- * * `<md-card-content>` - Card content
- * * `<md-card-actions>` - Card actions
- * - `<md-card-icon-actions>` - Icon actions
- *
- * Cards have constant width and variable heights; where the maximum height is limited to what can
- * fit within a single view on a platform, but it can temporarily expand as needed.
- *
- * @usage
- * ### Card with optional footer
- * <hljs lang="html">
- * <md-card>
- * <img src="card-image.png" class="md-card-image" alt="image caption">
- * <md-card-content>
- * <h2>Card headline</h2>
- * <p>Card content</p>
- * </md-card-content>
- * <md-card-footer>
- * Card footer
- * </md-card-footer>
- * </md-card>
- * </hljs>
- *
- * ### Card with actions
- * <hljs lang="html">
- * <md-card>
- * <img src="card-image.png" class="md-card-image" alt="image caption">
- * <md-card-content>
- * <h2>Card headline</h2>
- * <p>Card content</p>
- * </md-card-content>
- * <md-card-actions layout="row" layout-align="end center">
- * <md-button>Action 1</md-button>
- * <md-button>Action 2</md-button>
- * </md-card-actions>
- * </md-card>
- * </hljs>
- *
- * ### Card with header, image, title actions and content
- * <hljs lang="html">
- * <md-card>
- * <md-card-header>
- * <md-card-avatar>
- * <img class="md-user-avatar" src="avatar.png"/>
- * </md-card-avatar>
- * <md-card-header-text>
- * <span class="md-title">Title</span>
- * <span class="md-subhead">Sub header</span>
- * </md-card-header-text>
- * </md-card-header>
- * <img ng-src="card-image.png" class="md-card-image" alt="image caption">
- * <md-card-title>
- * <md-card-title-text>
- * <span class="md-headline">Card headline</span>
- * <span class="md-subhead">Card subheader</span>
- * </md-card-title-text>
- * </md-card-title>
- * <md-card-actions layout="row" layout-align="start center">
- * <md-button>Action 1</md-button>
- * <md-button>Action 2</md-button>
- * <md-card-icon-actions>
- * <md-button class="md-icon-button" aria-label="icon">
- * <md-icon md-svg-icon="icon"></md-icon>
- * </md-button>
- * </md-card-icon-actions>
- * </md-card-actions>
- * <md-card-content>
- * <p>
- * Card content
- * </p>
- * </md-card-content>
- * </md-card>
- * </hljs>
- */
- function mdCardDirective($mdTheming) {
- return {
- restrict: 'E',
- link: function ($scope, $element, attr) {
- $element.addClass('_md'); // private md component indicator for styling
- $mdTheming($element);
- }
- };
- }
- ngmaterial.components.card = angular.module("material.components.card");
|