Post
Ask Question

Angular Material: Card Based Interface - Part One

Angular Material

Angular Material is a UI Component framework and a reference implementation of Google's Material Design Specification. Further information about Angular Material can be located here.

Angular Material and Card or Tile Based Interface

I have been a great fan of Google Now and the way all the information is presented in a card based interface. So I wanted to implement a similar UI. While researching for card based interfaces, I came across Angular Material. Card is one of the components from Angular Material, which can help us in building card-based User Interfaces.

Before I get into the details, here is how card interface looks,

Card

Building Card Interface

Angular Material provides us various types of cards. These cards can be used based on the type of information we would like to display,

Now let's follow the below steps for our interface which will display our information in card format,

  1. Create an index.html by using the below code,
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <title>Angular Material Card</title>  
    5.     <meta charset="utf-8">  
    6.     <meta name="viewport" content="width=device-width, initial-scale=1">      
    7.     <link rel='stylesheet' href='angular-material.min.css'>  
    8. <style>  
    9. .card-media {  
    10.     background-color: #CACACA;  
    11. }  
    12. </style>    
    13. </head>  
    14. <body ng-app="MyApp">  
    15. <div ng-controller="appController" ng-cloak>      
    16.   <md-content class="md-padding" layout-xs="column" layout="row">  
    17.     <div flex-xs flex-gt-xs="30" layout="column">          
    18.       <md-card>  
    19.         <md-card-title>  
    20.           <md-card-title-text>  
    21.             <span class="md-headline">Large Card</span>  
    22.             <span class="md-subhead">Subheading<span>  
    23.           </md-card-title-text>  
    24.           <md-card-title-media>  
    25.             <div class="md-media-lg card-media"></div>  
    26.           </md-card-title-media>  
    27.         </md-card-title>  
    28.         <md-card-actions layout="row" layout-align="end center">  
    29.           <md-button>Action 1</md-button>  
    30.           <md-button>Action 2</md-button>  
    31.         </md-card-actions>  
    32.       </md-card>  
    33.       <md-card md-theme="default" md-theme-watch="" class="_md md-default-theme">  
    34.         <md-card-title>  
    35.           <md-card-title-text>  
    36.             <span class="md-headline">Small Card</span>  
    37.             <span class="md-subhead">Subheading</span>  
    38.           </md-card-title-text>  
    39.           <md-card-title-media>  
    40.             <div class="md-media-sm card-media"></div>  
    41.           </md-card-title-media>  
    42.         </md-card-title>  
    43.         <md-card-actions layout="row" layout-align="end center" class="layout-align-end-center layout-row">  
    44.           <button class="md-button md-default-theme md-ink-ripple" type="button" ng-transclude="" aria-label="Action 1"><span class="ng-scope">Action 1</span></button>  
    45.           <button class="md-button md-default-theme md-ink-ripple" type="button" ng-transclude="" aria-label="Action 2"><span class="ng-scope">Action 2</span></button>  
    46.         </md-card-actions>  
    47.       </md-card>   
    48.    </div>  
    49. </md-content>  
    50. </div>  
    51. <script src='angular.min.js'></script>  
    52. <script src='angular-animate.min.js'></script>  
    53. <script src='angular-route.min.js'></script>  
    54. <script src='angular-aria.min.js'></script>  
    55. <script src='angular-messages.min.js'></script>  
    56. <script src='angular-material.min.js'></script>  
    57. <script src='app.js'></script>  
    58. </body>  
    59. </html>  
    Some of the directives from the above code can be explained as below,

    Directives Description
    layout="row" Sets layout of a container is row manner
    layout-xs="column" Defines breakpoints for responsiveness
    flex-xs flex-gt-xs="30" Child elements within container and their breakpoints. This can be imagined like bootstrap’s grid system
    md-card Directive for Card based on Google’s Machine Design

  2. Create a new app.js and copy below code to it
    1. var myapp= angular.module('MyApp', ['ngMaterial']);  
    2.   
    3. myapp.controller('appController', function($scope) {  
    4.   
    5. })  
    Pl. Note: I have copied all the required JS and CSS files to my local folder while creating this exercise. You can install the Angular Material library (and its dependent libraries) in your local directory using NPM or Bower.

  3. Open index.html in browser and see how the cards are looking,

    index
  4. Now let’s add another card and let’s verify how it becomes responsive. For that in the above code, just locate </md-content> tag before our <script> tags at the end of index.html. Copy below code snippet,
    1. <div flex-xs flex-gt-xs="30" layout="column">        
    2.       <md-card class="_md">  
    3.         <md-card-header>            
    4.           <md-card-header-text>  
    5.             <span class="md-title">Right Information</span>  
    6.             <span class="md-subhead">At right time</span>  
    7.           </md-card-header-text>  
    8.         </md-card-header>  
    9.         <img src="http://placeholdit.imgix.net/~text?w=430&h=220"/>          
    10.         <md-card-title>  
    11.           <md-card-title-text>  
    12.             <span class="md-headline">In-card actions</span>  
    13.             <span class="md-subhead">Description</span>  
    14.           </md-card-title-text>  
    15.         </md-card-title>  
    16.         <md-card-actions layout="row" layout-align="start center" class="layout-align-start-center layout-row">  
    17.           <button class="md-button md-ink-ripple" type="button" ng-transclude="" aria-label="Action 1"><span class="ng-scope">Action 1</span></button>  
    18.           <button class="md-button md-ink-ripple" type="button" ng-transclude="" aria-label="Action 2"><span class="ng-scope">Action 2</span></button>  
    19.         </md-card-actions>  
    20.         <md-card-content>  
    21.           <p>  
    22.             Discovered here how UI implementation for Cards is done.  
    23.             Use cards to present right information at right time and at right place.  
    24.           </p>  
    25.         </md-card-content>  
    26.       </md-card>       
    27.     </div>   
  5. Save index.html and open in a browser and see how the cards are looking,

    Save

    Now let’s resize the window and see how cards become responsive too. I am using Developer Tools for testing responsiveness of these cards.

    cards

This way we can generate a simple card for showing information in a very elegant way. In the next article, we will actually show some information. Just to show the right information at the right time at the right place.


Similar Articles