Angular Material: November 2016

Wednesday, 30 November 2016

Leave form using angular material

Code

To Get the above design copy the below code

<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'])
            .module('inputErrorsApp', ['ngMaterial', 'ngMessages'])
            .controller('cardController', cardController);

function cardController ($scope) {            
         }  
      </script>

.cyan{
  background: #055656;
    box-shadow: 1px 2px 3px #ccc;
}

.inputdemoErrors .inputErrorsApp {
  min-height: 48px; }

.inputdemoErrors md-input-container > p {
  font-size: 0.8em;
  text-align: left;
  width: 100%; }

md-input-container:after(.md-input-valid) .md-auto-hide .md-input-message-animation{
opacity: 0!important;

}
            md-input-container {
             margin: 0px!important;
             vertical-align: middle;
            }
            .center_align{
               text-align: center;
               margin: 0 auto;
            }
md-input-container.md-default-theme label, md-input-container label, md-input-container.md-default-theme .md-placeholder, md-input-container .md-placeholder {
    text-shadow: ;
    color: #4CAF50!important;
}
md-input-container:after {
    content: '';
    display: table;
    clear: both;
    opacity: 0!important;
}
.clearflex{
      display: block;
    padding: 16px;
}
.pull-left{
  float: left;
    
    margin: 19px;
    
}
.pull-right{
  float: right;
}
md-card {
    box-shadow: 0 5px 9px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
md-input-container.md-default-theme .md-input, md-input-container .md-input {
   
}
.md-select-value, md-select .md-select-value {
    border-bottom-color: #8BC34A!important;
}
.md-select-value {
  color: #4CAF50!important;
}
.grey placeholder{
  color: #ccc!important;
}

</style>    
   </head>
   <form name="projectForm">
   <body ng-app="firstApplication">  
      <md-card>
      <div layout="row" class="cyan">
       <div class="pull-left md-title">Leave Form</div>
        
            <div layout-gt-xs="pull-right row">
          
            <md-select ng-model="actions" placeholder="More actions">
              <md-option value="Select by Date">Select by Date</md-option>
              <md-option value="Select by Designation">Select by Designation</md-option>
              <md-option value="Select by Leave type">Select by Leave type</md-option>

</md-select>
        
          </div>
          </div>
          
          
          
        </md-card-header>
       <md-card-content>

<div class="row clearflex"></div>
        <md-input-container class="md-block" md-input-invalid">
          <label class="md-required" for="input_235">Employee Email</label>
          <input required="" name="clientName" ng-model="project.firstName" class="ng-pristine md-input ng-empty ng-invalid ng-invalid-required ng-touched">
          <div class="md-errors-spacer"></div>
          <div ng-messages="projectForm.firstName.$error" class="md-input-messages-animation md-auto-hide ng-active" aria-live="assertive">
            <div ng-message="required" class="md-input-message-animation ng-scope"></div>
          </div>
        </md-input-container>
     
        
        <md-input-container class="md-block">
          <label>Employee ID</label>
          <input type="text" required="">
        </md-input-container>

<md-input-container class="md-block">
          <label>Employee Name</label>
          <input>
        </md-input-container>

<md-input-container class="md-block">
          <label>Designation</label>
          <input>
        </md-input-container>

<md-input-container class="md-block">
          <label>Leave Type</label>
          <md-select ng-model="Leave">
          <md-option value="Casual Leave">Casual Leave</md-option>
          <md-option value="Paid Leave">Paid Leave</md-option>
          </md-select>
        </md-input-container>

<div class="row clearflex"></div> 
        
        <md-datepicker class="flex-50" ng-model="myDate1" md-placeholder="Leave From Date"></md-datepicker>
        
        <md-datepicker class="flex-50" ng-model="myDate11" md-placeholder="Leave To Date"></md-datepicker>
       <div class="row clearflex"></div>
       <div class="bottom-sheet-demo inset" layout="row" layout-sm="column" layout-align="center" >
    <md-button flex="50" class="md-primary md-raised">Submit</md-button>
    <md-button flex="50" class="md-primary md-raised">Reset</md-button>
  </div>
         </md-card-content>
      </md-card>

</body>
   
</html>

Tuesday, 22 November 2016

Simple Registration Form

Registration Form

Code

To Get the above design copy the below code

.inputdemoErrors .inputErrorsApp {
  min-height: 48px; }

.inputdemoErrors md-input-container > p {
  font-size: 0.8em;
  text-align: left;
  width: 100%; }

md-input-container:after(.md-input-valid) .md-auto-hide .md-input-message-animation{
opacity: 0!important;

}
            md-input-container {
             margin: 0px!important;
             vertical-align: middle;
            }
            .center_align{
               text-align: center;
               margin: 0 auto;
            }
md-input-container.md-default-theme label, md-input-container label, md-input-container.md-default-theme .md-placeholder, md-input-container .md-placeholder {
    text-shadow: ;
    color: #2196F3!important;
}
md-input-container:after {
    content: '';
    display: table;
    clear: both;
    opacity: 0!important;
}
.clearflex{
      display: block;
    padding: 16px;
}
.pull-left{
  float: left;
    width: 45%;
    margin: 10px;
    text-align: center!important;
    margin: auto;
}
.pull-right{
  float: right;
    width: 45%;
    margin: 10px;
    text-align: center!important;
    margin: auto;
}

</style>    
   </head>
   <form name="projectForm">
   <body ng-app="firstApplication">  
      <md-card>
       <md-card-header>
        <md-card-header-text>
          <span class="md-title">Registration Form</span>
           </md-card-header-text>
        </md-card-header>
       <md-card-content>

<div layout="row">

<md-input-container flex="50" class="flex-50 md-input-invalid">
          <label class="md-required" for="input_235">First Name</label>
          <input required="" name="clientName" ng-model="project.firstName" class="ng-pristine md-input ng-empty ng-invalid ng-invalid-required ng-touched">
          <div class="md-errors-spacer"></div>
          <div ng-messages="projectForm.firstName.$error" class="md-input-messages-animation md-auto-hide ng-active" aria-live="assertive">
            <div ng-message="required" class="md-input-message-animation ng-scope"></div>
          </div>
        </md-input-container>

<md-input-container class="flex-50">
          <label>Last Name</label>
          <input>
        </md-input-container>

</div>

<md-input-container class="flex-50">
          <label>Gender</label>
          <md-select ng-model="State">
          <md-option value="Male">Male</md-option>
          <md-option value="Female">Female</md-option>
          </md-select>
        </md-input-container>

<md-input-container class="flex-50">
          <label>Occupations</label>
          <md-select ng-model="Occupations">
          <md-option value="Student">Student</md-option>
          <md-option value="Working">Working</md-option>
          </md-select>
        </md-input-container>
      </div>

<div layout="row">
        <md-input-container class="flex-50">
          <label>Email</label>
          <input>
        </md-input-container>

<md-input-container class="flex-50">
          <label>Password</label>
          <input type="password">
        </md-input-container>
        </div>

<div layout="row">
        <md-input-container class="flex-50">
          <label>Retype Password</label>
          <input type="password">
        </md-input-container>
      
        <md-input-container class="flex-50">
          <label>Address</label>
          <input>
        </md-input-container>
        </div>

<md-input-container class="flex-50">
          <label>Zip Code</label>
          <input type="number">
        </md-input-container>

<md-input-container class="flex-50">
          <label>Mobile No.</label>
          <input>
        </md-input-container>

<md-input-container class="flex-50">
          <label>City</label>
          <md-select ng-model="City">
          <md-option value="Bangalore">Bangalore</md-option>
          <md-option value="Mysore">Mysore</md-option>
          </md-select>
        </md-input-container>

</div>

<button class="md-primary md-raised md-button md-ink-ripple flex-50 pull-left" type="button" ng-transclude="" flex="50">
         <span class="ng-scope">Submit</span>
         <div class="md-ripple-container"></div>
         </button>

<button class="md-raised md-primary md-button md-ink-ripple flex-50 pull-right" type="button" ng-transclude="" ng-disabled="false" disabled="disabled"><span class="ng-scope">Cancel</span></button>
         </md-card-content>
      </md-card>
   </body>
</html>

Simple Login Form

Login Form

Code

To Get above design copy the below code

<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">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script language="javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('cardController', cardController);

<md-input-container class="md-block md-input-has-value">
          <label for="input_63">Name/Email</label>
          <input class="ng-pristine ng-valid md-input ng-not-empty ng-touched" aria-invalid="false">
          <div class="md-errors-spacer"></div>
         </md-input-container>

<md-input-container class="md-block md-input-has-value">
          <label for="input_63">Password</label>
          <input type="password" class="ng-pristine ng-valid md-input ng-not-empty ng-touched" aria-invalid="false">
          <div class="md-errors-spacer"></div>
         </md-input-container>

<button class="md-primary md-raised md-button md-ink-ripple flex-50" type="button" ng-transclude="" flex="50">
         <span class="ng-scope">LOGIN</span>
         <div class="md-ripple-container"></div>
         </button>

<p class="makerow">Login Through Social media
    <a href="#">
      <i class="fa fa-facebook-square fa-2x" class="flex-50" aria-hidden="true"></i>
    </a>
  
  <a href="#">
      <i class="fa fa-google-plus-square fa-2x" class="flex-50" aria-hidden="true"></i>
    </a>

</md-card-content>
      </md-card>
   </body>
</html>