- In my previous post we have learnt how to configure and use Angular Material library.
- In this demo, “We will build a sample profile using different UI elements in Angular Material”.
- For demonstration we have used few free images from StockSnap.
- The Angular Material library and its dependencies are installed using Bower command.In my previous post we have learn to install Angular material library.
- The demo project structure looks like following screenshot.
- The profileDemo.html file contains all the code for building a profile.We have used many elements like sidebar,toolbar,list and card element to build this profile.The content of the profileDemo.html file are as follows.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Material Demo</title>
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css">
</head>
<body ng-controller="MyController" layout="column">
<section layout="row" flex>
<md-sidenav class="md-sidenav-left md-whiteframe-z2"
md-component-id="left"
md-is-locked-open="$mdMedia('gt-md')">
<md-toolbar class="md-warn">
<div class="md-toolbar-tools">
<h1 class="md-display-4">Sandeep Kumar Patel</h1>
</div>
</md-toolbar>
<md-card>
<img alt="Sandeep Gravatar image"
src="http://www.gravatar.com/avatar/c6e6c57a2173fcbf2afdd5fe6786e92f.png?s=300">
<md-card-content>
<h2 class="md-title">About Me</h2>
<p>
A passionate Blogger and Developer.
He has more then 5 years of experience on web application development.
He loves to work in javascript programming language.At present he is
exploring W3C Web Component specification.
</p>
</md-card-content>
<md-card>
</md-sidenav>
<md-content layout="row">
<md-card flex>
<img alt="Education"
src="image/table-chair.jpg">
<md-card-content>
<h2 class="md-title">Education</h2>
<md-list>
<md-list-item class="md-1-line">
<p class="md-list-item-text">
He has done M.Tech in Computer Science subject from VIT University Vellore.
He has done B.Tech in Information Technology subject from BPUT University.
</p>
</md-list-item>
</md-list>
</md-card-content>
</md-card>
<md-card flex>
<img alt="Sandeep Gravatar image"
src="image/mac-on-table.jpg">
<md-card-content>
<h2 class="md-title">Skills</h2>
<div layout>
<div flex="40" layout layout-align="center center">
<span class="md-body-1 md-primary">JavaScript</span>
</div>
<md-slider flex ng-model="80" min="1" max="100" class="md-primary">
</md-slider>
</div>
<div layout>
<div flex="40" layout layout-align="center center">
<span class="md-body-1 md-warn">AngularJS</span>
</div>
<md-slider flex ng-model="90" min="1" max="100" class="md-warn">
</md-slider>
</div>
<div layout>
<div flex="40" layout layout-align="center center">
<span class="md-body-1 md-primary">Jquery</span>
</div>
<md-slider flex ng-model="70" min="1" max="100" class="md-primary">
</md-slider>
</div>
<div layout>
<div flex="40" layout layout-align="center center">
<span class="md-body-1 md-warn">CSS</span>
</div>
<md-slider flex ng-model="60" min="1" max="100" class="md-warn">
</md-slider>
</div>
<div layout>
<div flex="40" layout layout-align="center center">
<span class="md-body-1 md-primary">Java</span>
</div>
<md-slider flex ng-model="50" min="1" max="100" class="md-primary">
</md-slider>
</div>
</md-card-content>
</md-card>
<md-card flex>
<img alt="Contact Me"
src="image/contact-me.jpg">
<md-card-content>
<h2 class="md-title">Contact Me</h2>
<div layout>
<div flex="20" layout layout-align="left center">
<span class="md-body-1 md-primary">Email</span>
</div>
<span flex class="md-primary" layout-align="left center">
sandeeppateltech@gmail.com
</span>
</div>
<div layout>
<div flex="20" layout layout-align="left center">
<span class="md-body-1 md-primary">Blog</span>
</div>
<span flex class="md-primary" layout-align="left center">
www.tutorialsavvy.com
</span>
</div>
</md-card-content>
</md-card>
</md-content>
</section>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script>
var myApp = angular.module("myApp",[
"ngMaterial"
]);
myApp.controller("MyController",function($scope){
$scope.buttonName= "Click Me"
});
</script>
</body>
</html>
- The output of the profile demo looks like following screenshot:
- The chrome developer toolbar inspection looks like following screenshot.
- The demo code can be downloaded from the following link.
