পৃষ্ঠাসমূহ

Search Your Article

CS

 

Welcome to GoogleDG – your one-stop destination for free learning resources, guides, and digital tools.

At GoogleDG, we believe that knowledge should be accessible to everyone. Our mission is to provide readers with valuable ebooks, tutorials, and tech-related content that makes learning easier, faster, and more enjoyable.

What We Offer:

  • 📘 Free & Helpful Ebooks – covering education, technology, self-development, and more.

  • 💻 Step-by-Step Tutorials – practical guides on digital tools, apps, and software.

  • 🌐 Tech Updates & Tips – simplified information to keep you informed in the fast-changing digital world.

  • 🎯 Learning Support – resources designed to support students, professionals, and lifelong learners.

    ✔ Latest world News 

     

Our Vision

To create a digital knowledge hub where anyone, from beginners to advanced learners, can find trustworthy resources and grow their skills.

Why Choose Us?

✔ Simple explanations of complex topics
✔ 100% free access to resources
✔ Regularly updated content
✔ A community that values knowledge sharing

We are continuously working to expand our content library and provide readers with the most useful and relevant digital learning materials.

📩 If you’d like to connect, share feedback, or suggest topics, feel free to reach us through the Contact page.

Pageviews

Thursday, February 9, 2017

Angular Material - Cards

md-card, an Angular Directive, is a container directive and is used to draw cards in angularjs application. Following are the angular directives and classes used in md-card.

S.N.Directive/Class & Description
1<md-card-header>
Header for the card, holds avatar, text and squared image.
2<md-card-avatar>
Card avatar.
3md-user-avatar
Class for user image.
4<md-icon>
Icon directive.
5<md-card-header-text>
Contains elements for the card description.
6md-title
Class for the card title.
7md-subhead
Class for the card sub header.
8<img>
Image for the card.
9<md-card-title>
Card content title.
10<md-card-title-text>
Card Title text container.
11md-headline
Class for the card content title.
12md-subhead
Class for the card content sub header.
13<md-card-title-media>
Squared image within the title.
14md-media-sm
Class for small image.
15md-media-md
Class for medium image.
16md-media-lg
Class for large image.
17<md-card-content>
Card content.
18md-media-xl
Class for extra large image.
19<md-card-actions>
Card actions.
20<md-card-icon-actions>
Icon actions.

Example

The following example showcases the use of md-card directive to showcase use of card classes.
am_cards.htm
<html lang="en" >
   <head>
      <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <script language="javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('cardController', cardController);

         function cardController ($scope) {            
         }  
      </script>      
   </head>
   <body ng-app="firstApplication">  
      <md-card>
         <img ng-src="html5-mini-logo.jpg" class="md-card-image" alt="Learn HTML5">
         <md-card-header>
            <md-card-avatar>
               <img class="md-user-avatar" src="html5-mini-logo.jpg">
            </md-card-avatar>
            <md-card-header-text>
               <span class="md-title">HTML5</span>
               <span class="md-subhead">Learn HTML5 @TutorialsPoint.com</span>
            </md-card-header-text>
         </md-card-header>
         <md-card-title>
            <md-card-title-text>
               <span class="md-headline">HTML5</span>
            </md-card-title-text>
         </md-card-title>
         <md-card-actions layout="row" layout-align="start center">
            <md-button>Download</md-button>
            <md-button>Start</md-button>
            <md-card-icon-actions>
               <md-button class="md-icon-button" aria-label="icon">
                  <md-icon class="material-icons">add</md-icon>
               </md-button>
            </md-card-icon-actions>
         </md-card-actions>
         <md-card-content>
            <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
            <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).</p>
            </p>The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
         </md-card-content>
      </md-card>
   </body>
</html>

Result

Verify the result.
Labels:

2 comments:

Subscribe to: Post Comments (Atom)