angular-material-simple-components
Version:
This include simplification of angular material components
157 lines (117 loc) • 7.66 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Material Components</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<style>
html, body {
height: 100%;
}
.test{
width: 45px ;
height: 45px ;
border-radius: 50% ;
}
</style>
</head>
<body ng-app="amc-test" ng-cloak>
<form name="myForm" layout="row" layout-align="space-around center" ng-controller="Ctrl">
<md-content flex-gt-md="90" flex-gt-lg="80" layout="column" flex style="overflow-y: auto;" md-whiteframe="4" layout-padding layout-margin>
<h1 style="align-self: center;">Demo</h1>
<md-content flex flex-gt-sm="70" layout="row" layout-align="space-around center" layout-wrap layout-margin>
<div layout="column" flex-xs="100" flex-sm="100" flex-gt-md="40">
<span class="md-title">Text And Number Inputs</span><br/>
<text-input icon="text_fields" label="Text Input Sample" ng-model="input" is-required="true" max-length="50">
<error-message error="required">This field is required.</error-message>
</text-input>
<text-input icon="email" type="email" label="Email Input Sample" ng-model="email" is-required="true" max-length="50">
<error-message error="required">This field is required.</error-message>
<error-message error="email">This field must be a valid email address.</error-message>
</text-input>
<text-input icon="security" type="password" label="Password Input Sample" ng-model="password" is-required="true" max-length="50">
<error-message error="required">This field is required.</error-message>
</text-input>
<text-input icon="security" type="password" label="Password Match Input Sample" ng-model="password2" is-required="true" max-length="50" match="password" check-match="true">
<error-message error="required">This field is required.</error-message>
<error-message error="match">The fields not match.</error-message>
</text-input>
<number-input icon="attach_money" label="Number Input Sample" ng-model="number" is-required="true" max-length="50">
<error-message error="required">This field is required.</error-message>
</number-input>
<text-area-input name="textArea" icon="text_fields" label="Text Area Input Sample" ng-model="textArea" is-required="true" max-length="50">
<error-message error="required">This field is required.</error-message>
</text-area-input>
</div>
<span flex="10"></span>
<div layout="column" flex-xs="100" flex-sm="100" flex-gt-md="40" ><!--ng-init="date = '1995-04-29 00:00:00'"-->
<span class="md-title">Date and time Input</span><br/><br/>
<date-input ng-model="date" label="Date Input Sample" is-required="true" >
<error-message error="required">This field is required.</error-message>
<error-message error="valid">This field is invalid.</error-message>
</date-input>
<br/>
<time-input ng-model="time" label="Time Input Sample" is-required="true">
<error-message error="required">This field is required.</error-message>
</time-input>
<span class="md-title">Image Input Card</span><br/>
<image-input override-class="'test'" name="image" ng-model="image" is-required="true">
<error-message error="required">This field is required.</error-message>
<error-message error="image">This field must be a valid image.</error-message>
</image-input>
<span class="md-title">Search Input Card</span><br/>
<search-input label="Search Input Sample" name="search" ng-model="search"></search-input>
</div>
</md-content>
<md-divider></md-divider>
<md-content flex flex-gt-sm="70" layout="column" layout-margin>
<span class="md-title">Html Input Card</span><br/>
<html-text-area-input name="htmlTextArea" icon="text_fields" label="Html Input Sample" ng-model="htmlTextArea" is-required="true" >
<error-message error="required">This field is required.</error-message>
</html-text-area-input>
</md-content>
<md-divider></md-divider>
<md-content flex flex-gt-sm="70" layout="column" layout-margin>
<span class="md-title">Pagination</span><br/>
<md-pagination items-per-page="5" current-page="currentPage" n-items="50"></md-pagination>
<pre><b>Current Page:</b> {{ currentPage }}</pre>
</md-content>
<md-divider></md-divider>
<md-content layout="column" layout-margin>
<pre><b>Form Valid:</b> {{ myForm.$valid }}</pre>
</md-content>
</md-content>
</form>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.js"></script>
<!-- Angular Material Components -->
<script src="./../dist/angular-material-components.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
angular.module('amc-test', ['angular-material-simple-components'])
.controller('Ctrl', function($scope){
})
/*Override default date format*/
.config(function($mdDateLocaleProvider){
/*$mdDateLocaleProvider.formatDate = function(date) {
return ("0" + date.getDate()).slice(-2) + '/' + ("0" + (date.getMonth() + 1)).slice(-2) + '/' + date.getFullYear();
};
$mdDateLocaleProvider.parseDate = function(date) {
console.log(date);
var dtA = date.split('-');
var day = dtA[2].split(' ')[0],
mnt = dtA[1],
yr = dtA[0];
return new Date(yr, mnt-1, day, 0, 0, 0, 0);
};*/
});
</script>
</body>
</html>