-
Angular Material Card
over 8 years ago
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> directive4.<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)