Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Angular Material Card

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 808
    Comment on it

    Angular material card is something new what we get for better UI designing. It is used to draw cards in angular applications. md-Card directive is used for AM-card. It is a container which draw the card and contain many directives inside to make a rich UI card.

     

    The directives which can be used inside md-card:

     

    1.<md-card-title>
    this directive is used to set the title for the content of the card. It is a child element of md-card-content.

     

    2.<md-subhead>
    this directive is used to set the subheader for the content of the card. It is a child element of md-card-content.

     

    3.<img>
    we can display image inside the card using <img> directive

     

    4.<md-icon>
    This directive holds the icon for the card.There are angular material icons list we can use anyone to display inside the card with the help of md-icon.

     

    5.<md-card-icon-actions>
    if we want to perform any actions within the icon of the card then we can use this directive.It will act as a child element of md-icon directive.

     

    6.<md-card-header>

    To display the header in the card.it can hold anything text squared image or avatar.


    7.<md-user-avatar>
    this is directive used to display user image inside the card.

     

    8.<Md-title>

    We can set the title of the card inside using this directive.

     

    9.<md-card-content>
    To write content inside the card, we use md-card-content directive instead of md-content.

     

    10.<md-card-actions>
    To perform any action inside the card we can use md-card-actions in which we can have buttons or anchor tags.

     

    See the example how to use md-card in your view page:

    <html lang="en" >
       <head>
         <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
          <script src="http://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('myapp', ['ngMaterial'])
                .controller('firstController', firstController);
    
             function firstController ($scope) {
               
             }                 
          </script>     	  
       </head>
       <body ng-app="myapp"> 
          <div id="inputContainer" class="inputDemo" ng-controller="firstController as ctrl" ng-cloak>
           <md-content layout="row" flex="100" >
      
                    <md-content layout="column" flex="50">
                        <md-card layout="row" flex="30"> 
                            <md-card-title>
                                <md-card-title-text>
                                    <span class="md-subhead">Send Invitations</span>
                                </md-card-title-text>
                            </md-card-title>
    						<div layout="column" flex="30">
                            <md-card-actions layout="row" >
                                <md-button class="md-primary md-raised" style="height:30px">
                                 SEND  
                                </md-button>
                                <md-card-content>Phone or email invites</md-card-content>
                            </md-card-actions>
                            <md-card-actions layout="row" >
                                <md-button class="md-warn md-raised" style="height:30px">
                                   CONNECT
                                </md-button>
                                <md-card-content>Website link</md-card-content>
                            </md-card-actions>
    						</div>
                        </md-card>
                        <md-card layout="row" flex="20">
                            <md-card-title>
                                <md-card-title-text>
                                    <span class="md-subhead">Host</span>
                                </md-card-title-text>
                            </md-card-title>
                            <md-card-actions layout="row" >
                                <md-button class="md-primary md-raised" style="height:30px">
                                  ADD 
                                </md-button>
                                <md-card-content>Jyoten Patel</md-card-content>
                            </md-card-actions>
                            <md-card-actions layout="row" >
                                <md-button class="md-warn md-raised" style="height:30px">
                               INVITE
                                </md-button>
                                <md-card-content style="fill:#F18345">Add a Co-Host</md-card-content>
                            </md-card-actions>
                        </md-card>
                    </md-content>
    </md-content>
    </div>
       </body>
    </html>

     

    Run the application and see the result: Refer screenshot

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: