angular-floating-label
Version:
Floating label directive for AngularJs
66 lines (54 loc) • 1.57 kB
HTML
<html ng-app="demo" ng-controller="DemoController">
<head>
<title>Floating Label Demo</title>
<link rel="stylesheet" type="text/css" href="../dist/floating-label.css">
<style>
body {
font-family: sans-serif;
}
input, button {
padding: 8px 14px;
box-shadow: none;
border: 1px solid #bbb;
border-radius: 5px;
width: 220px;
}
button {
background: #2980b9;
color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
width: auto;
}
form {
width: 400px;
margin: 100px auto;
}
.control-group {
margin-bottom: 20px;
}
.control-group .floating-label {
margin-top: -20px;
}
</style>
</head>
<body>
<form>
<div class="control-group">
<input type="text" placeholder="Email address" floating-label ng-model="test" />
</div>
<div class="control-group">
<input type="password" placeholder="Password" floating-label />
</div>
<div class="control-group">
<button type="submit">Log in</button>
</div>
</form>
<script src="../bower_components/angular/angular.js"></script>
<script src="../dist/floating-label.js"></script>
<script>
angular.module('demo', ['components']);
angular.module('demo').controller('DemoController', function () {});
</script>
</body>
</html>